:root {
	--accent: #354E76;
	--accent-text: #354E76;
	--accent-hover: #354E76cc;
	--accent-disabled: #354E7666;
	--text-color: #242424;
	--text-color-alt: #FFF;
	--background-color: #fff;
	--field-background-color: #F4F4FC;
	--module-background-color: #ffffff;
	--header-background-colour: #354E76;
	--navmenu-background-colour: #ffffff;
	--navmenu-hover-background-colour: #5d7191;
	--header-color: #242424;
	--label-colour: #242424;
	--header-pill-background-color: white;
	--icon-color: #565656;
	--icon-color-alt: #fff;
	--icon-color-highlight: #354E76;
	--seperator-color: #eaedf3;
	--border-color: #c9c7c5;
	--error: #e6492d;
	--error-transparent: #e6492d1a;
	--tertiary-color: #706E6B;
	--card-header-color: #D8D8FF;
	--icon-highlight: #00f;
	--link-colour: #1B6BE0;
	--JobStatus-dormant: #FF2E6C;
	--JobStatus-on-approval: #1b6be0;
	--JobStatus-quotation: #603794;
	--JobStatus-on-hold: #969492;
	--JobStatus-ready-invoice: #1665d8;
	--JobStatus-closed-pending-pon: #E30000;
	--JobStatus-complete: #34aa44;
	--JobStatus-invoiced: #969492;
	--JobStatus-priority: #000;
	--JobStatus-integration: #000;
	--JobStatus-tasks-complete: #000;
	--JobStatus-live: #3E3E3C;
	--ComplaintStatus-Low: #3E3E3C;
	--ComplaintStatus-Medium: #EBA234;
	--ComplaintStatus-High: #FF2E6C;
	--ComplaintStatus-Closed: var(--text-color);
	--CarStatus-customer-qa: #0000fb;
	--CarStatus-customer-qi: #FF2E6C;
	--CarStatus-combined-qa: #34aa44;
	--CarStatus-sgs-qa: #0000fb;
	--CarStatus-sgs-qa-background: #cfcffb;
	--CarStatus-sgs-qi: #FF2E6C;
	--CarStatus-sgs-qi-background: #FEDADA;
	--CarStatus-sgs-psqi: black;
	--CarStatus-sgs-psqi-background: #dbdbdb99;
	--CarStatus-sgs-sqi: #969492;
	--CarStatus-complete: #34aa44;
	--CarStatus-complete-background: #caffde;
	--CarStatus-base-background: var(--grey-three);
	--success-green: #34aa44;
	--Task-not-started: var(--text-color);
	--status-disabled-text: var(--text-color);
	--Task-in-progress: #090;
	--Task-complete: #006900;
	--Task-on-approval: #00f;
	--Task-approved: #0000fb;
	--Task-amends-required: #FF9E2C;
	--Task-on-hold: #999;
	--Task-abandoned: red;
	--Task-paused: #FF9E2C;
	--Task-background-not-started: transparent;
	--Task-background-in-progress: #ebf7ed;
	--Task-background-complete: var(--module-background-color);
	--Task-background-on-approval: var(--module-background-color);
	--Task-background-approved: var(--module-background-color);
	--Task-background-amends-required: var(--module-background-color);
	--Task-background-on-hold: #cdcdcd;
	--Task-background-abandoned: #fde6e6;
	--Task-background-paused: #fff6ea;
	--Task-background-failed: #DC3545;
	--Task-background-warning: #FF9E2C;
	--JobFlag-no-flagged: #f34545;
	--JobFlag-attention-required: #00f;
	--JobFlag-pending-information: #6161fb;
	--JobFlag-invoicing-issue: #facf55;
	--ItemStatus-live: #3E3E3C;
	--ItemStatus-complete: #34aa44;
	--ItemStatus-dormant: #FF2E6C;
	--ItemStatus-on-hold: #969492;
	--Status-background: var(--module-background-color);
	--success-green-icn: #34aa44;
	--JobFlag-no-flagged-icn: #f34545;
	--JobFlag-attention-required-icn: #00f;
	--JobFlag-pending-information-icn: #6161fb;
	--JobFlag-invoicing-issue-icn: #facf55;
	--ItemStatus-live-icn: #3E3E3C;
	--ItemStatus-complete-icn: #34aa44;
	--ItemStatus-dormant-icn: #FF2E6C;
	--ItemStatus-on-hold-icn: #969492;
	--Status-background-icn: transparent;
	--field-disabled-color: #f7f8fa;
	--red-background: #FDEDEA;
	--blue-background: #EDF3FA;
	--green-background: #E3F3E5;
	--grey-background: var(--grey-three);
	--tube-stop-color: #354E76;
	--tube-stop-color-alt: #354E7666;
	--table-header-background-colour: #f4f4fc;
	--table-row-alt-background-colour: #f8f8f8;
	--table-row-disabled: var(--grey-three);
	--table-row-selected: var(--background-color);
	--no-content-available-background-colour: #f8f8f8;
	--day-of-the-week-monday-background-colour: #ffe7a3;
	--day-of-the-week-tuesday-background-colour: #ffc580;
	--day-of-the-week-wednesday-background-colour: #caffde;
	--day-of-the-week-thursday-background-colour: #fedcf2;
	--day-of-the-week-friday-background-colour: #d8d8ff;
	--day-of-the-week-saturday-background-colour: #dddbda;
	--day-of-the-week-sunday-background-colour: #ffffff;
	--notification-unread-background-colour: #e5eef9;
	--notification-read-background-colour: #fafaf9;
	--system-notification-unread-background-colour: #f7ede7;
	--system-notification-read-background-colour: #fdf6f1;
	--day-of-the-week-monday-colour: #424242;
	--day-of-the-week-tuesday-colour: #424242;
	--day-of-the-week-wednesday-colour: #424242;
	--day-of-the-week-thursday-colour: #424242;
	--day-of-the-week-friday-colour: #424242;
	--day-of-the-week-saturday-colour: #424242;
	--day-of-the-week-sunday-colour: #424242;
	--profile-status-online: #34aa44;
	--table-stripe-odd-row: var(--module-background-color);
	--table-stripe-even-row: var(--table-row-alt-background-colour);
	--audit-value-green-highlight-color: #CAFFDE;
	--audit-value-red-highlight-color: #FEDADA;
	--audit-value-searched-highlight-color: #FACF51;
	--highlighted-container: var(--error-light-red);
}

[theme="navy"] {
	--accent: #354E76;
	--accent-text: #354E76;
	--accent-hover: #354E76cc;
	--accent-disabled: #354E7666;
	--text-color: #242424;
	--text-color-alt: #FFF;
	--background-color: #F4F4FC;
	--field-background-color: #fff;
	--module-background-color: #ffffff;
	--header-background-colour: #354E76;
	--navmenu-background-colour: #ffffff;
	--navmenu-hover-background-colour: #5d7191;
	--header-color: #242424;
	--label-colour: #242424;
	--header-pill-background-color: white;
	--icon-color: #565656;
	--icon-color-alt: #fff;
	--icon-color-highlight: #1B6BE0;
	--seperator-color: #eaedf3;
	--border-color: #c9c7c5;
	--error: #e6492d;
	--error-transparent: #e6492d1a;
	--tertiary-color: #706E6B;
	--card-header-color: #D8D8FF;
	--theme-example-content-color: #bbb;
	--icon-highlight: #36f;
	--link-colour: #1B6BE0;
	--disabled-text-colour: #a9a9a9;
	--JobStatus-none: #8F8F8F;
	--JobStatus-dormant: #FF2E6C;
	--JobStatus-on-approval: #1b6be0;
	--JobStatus-quotation: #603794;
	--JobStatus-on-hold: #969492;
	--JobStatus-ready-invoice: #1665d8;
	--JobStatus-closed-pending-pon: #E30000;
	--JobStatus-complete: #34aa44;
	--JobStatus-invoiced: #969492;
	--JobStatus-priority: #000;
	--JobStatus-integration: #000;
	--JobStatus-tasks-complete: #000;
	--JobStatus-live: #3E3E3C;
	--ComplaintStatus-Low: #3E3E3C;
	--ComplaintStatus-Medium: #EBA234;
	--ComplaintStatus-High: #FF2E6C;
	--ComplaintStatus-Closed: var(--text-color);
	--success-green: #34aa44;
	--Task-not-started: var(--text-color);
	--status-disabled-text: var(--text-color);
	--Task-in-progress: #090;
	--Task-complete: #006900;
	--Task-on-approval: #00f;
	--Task-approved: #0000fb;
	--Task-amends-required: #FF9E2C;
	--Task-on-hold: #999;
	--Task-abandoned: red;
	--Task-paused: #FF9E2C;
	--Task-background-not-started: var(--module-background-color);
	--Task-background-in-progress: #ebf7ed;
	--Task-background-complete: var(--module-background-color);
	--Task-background-on-approval: var(--module-background-color);
	--Task-background-approved: var(--module-background-color);
	--Task-background-amends-required: var(--module-background-color);
	--Task-background-on-hold: #cdcdcd;
	--Task-background-abandoned: #fde6e6;
	--Task-background-paused: #fff6ea;
	--Task-background-failed: #DC3545;
	--JobFlag-no-flagged: #f34545;
	--JobFlag-attention-required: #00f;
	--JobFlag-pending-information: #6161fb;
	--JobFlag-invoicing-issue: #facf55;
	--ItemStatus-live: #3E3E3C;
	--ItemStatus-complete: #34aa44;
	--ItemStatus-dormant: #FF2E6C;
	--ItemStatus-on-hold: #969492;
	--Status-background: #eee;
	--success-green-icn: #34aa44;
	--JobFlag-no-flagged-icn: #f34545;
	--JobFlag-attention-required-icn: #00f;
	--JobFlag-pending-information-icn: #6161fb;
	--JobFlag-invoicing-issue-icn: #facf55;
	--ItemStatus-live-icn: #3E3E3C;
	--ItemStatus-complete-icn: #34aa44;
	--ItemStatus-dormant-icn: #FF2E6C;
	--ItemStatus-on-hold-icn: #969492;
	--Status-background-icn: #fff;
	--field-disabled-color: #f7f8fa;
	--red-background: #FDEDEA;
	--blue-background: #EDF3FA;
	--green-background: #E3F3E5;
	--tube-stop-color: #354E76;
	--tube-stop-color-alt: #D8D8FF;
	--table-header-background-colour: #f4f4fc;
	--table-row-alt-background-colour: #f8f8f8;
	--table-row-disabled: var(--grey-three);
	--table-row-selected: var(--background-color);
	--logo-url: url(../img/Logo.png);
	--unlink-url: url(../icons/unlink.ico);
	--no-content-available-background-colour: #f8f8f8;
	--day-of-the-week-monday-background-colour: #ffe7a3;
	--day-of-the-week-tuesday-background-colour: #ffc580;
	--day-of-the-week-wednesday-background-colour: #caffde;
	--day-of-the-week-thursday-background-colour: #fedcf2;
	--day-of-the-week-friday-background-colour: #d8d8ff;
	--day-of-the-week-saturday-background-colour: #dddbda;
	--day-of-the-week-sunday-background-colour: #ffffff;
	--notification-unread-background-colour: #e5eef9;
	--notification-read-background-colour: #fafaf9;
	--system-notification-unread-background-colour: #f7ede7;
	--system-notification-read-background-colour: #fdf6f1;
	--table-stripe-odd-row: var(--module-background-color);
	--table-stripe-even-row: var(--table-row-alt-background-colour);
	--audit-value-green-highlight-color: #CAFFDE;
	--audit-value-red-highlight-color: #FEDADA;
	--audit-value-searched-highlight-color: #FACF51;
	--highlighted-container: var(--error-light-red);
}

[theme="green"] {
	--accent: #25A357;
	--accent-text: #25A357;
	--accent-hover: #25A357cc;
	--accent-disabled: #25A35766;
	--text-color: #242424;
	--text-color-alt: #FFF;
	--background-color: #F4FCF7;
	--field-background-color: #fff;
	--module-background-color: #ffffff;
	--error: #e6492d;
	--error-transparent: #e6492d1a;
	--header-background-colour: #25A357;
	--navmenu-background-colour: #ffffff;
	--navmenu-hover-background-colour: #5d7191;
	--header-color: #242424;
	--label-colour: #242424;
	--header-pill-background-color: white;
	--icon-color: #565656;
	--icon-color-alt: #fff;
	--icon-color-highlight: #25A357;
	--seperator-color: #eaedf3;
	--border-color: #c9c7c5;
	--tertiary-color: #706E6B;
	--card-header-color: #CAFFDE;
	--theme-example-content-color: #bbb;
	--icon-highlight: #25A357;
	--link-colour: #1B6BE0;
	--JobStatus-none: #8F8F8F;
	--JobStatus-dormant: #FF2E6C;
	--JobStatus-on-approval: #1b6be0;
	--JobStatus-quotation: #603794;
	--JobStatus-on-hold: #969492;
	--JobStatus-ready-invoice: #1665d8;
	--JobStatus-closed-pending-pon: #E30000;
	--JobStatus-complete: #34aa44;
	--JobStatus-invoiced: #969492;
	--JobStatus-priority: #000;
	--JobStatus-integration: #000;
	--JobStatus-tasks-complete: #000;
	--JobStatus-live: #3E3E3C;
	--ComplaintStatus-Low: #3E3E3C;
	--ComplaintStatus-Medium: #EBA234;
	--ComplaintStatus-High: #FF2E6C;
	--ComplaintStatus-Closed: var(--text-color);
	--success-green: #34aa44;
	--Task-not-started: var(--text-color);
	--status-disabled-text: var(--text-color);
	--Task-in-progress: #090;
	--Task-complete: #006900;
	--Task-on-approval: #00f;
	--Task-approved: #0000fb;
	--Task-amends-required: #FF9E2C;
	--Task-on-hold: #999;
	--Task-abandoned: red;
	--Task-paused: #FF9E2C;
	--Task-background-not-started: var(--module-background-color);
	--Task-background-in-progress: #ebf7ed;
	--Task-background-complete: var(--module-background-color);
	--Task-background-on-approval: var(--module-background-color);
	--Task-background-approved: var(--module-background-color);
	--Task-background-amends-required: var(--module-background-color);
	--Task-background-on-hold: #cdcdcd;
	--Task-background-abandoned: #fde6e6;
	--Task-background-paused: #fff6ea;
	--Task-background-failed: #DC3545;
	--JobFlag-no-flagged: #f34545;
	--JobFlag-attention-required: #00f;
	--JobFlag-pending-information: #6161fb;
	--JobFlag-invoicing-issue: #facf55;
	--ItemStatus-live: #3E3E3C;
	--ItemStatus-complete: #34aa44;
	--ItemStatus-dormant: #FF2E6C;
	--ItemStatus-on-hold: #969492;
	--Status-background: #eee;
	--success-green-icn: #34aa44;
	--JobFlag-no-flagged-icn: #f34545;
	--JobFlag-attention-required-icn: #00f;
	--JobFlag-pending-information-icn: #6161fb;
	--JobFlag-invoicing-issue-icn: #facf55;
	--ItemStatus-live-icn: #3E3E3C;
	--ItemStatus-complete-icn: #34aa44;
	--ItemStatus-dormant-icn: #FF2E6C;
	--ItemStatus-on-hold-icn: #969492;
	--Status-background-icn: transparent;
	--field-disabled-color: #f7f8fa;
	--red-background: #FDEDEA;
	--blue-background: #EDF3FA;
	--green-background: #E3F3E5;
	--tube-stop-color: #25A357;
	--tube-stop-color-alt: #CAFFDE;
	--table-header-background-colour: #f4f4fc;
	--table-row-alt-background-colour: #f8f8f8;
	--table-row-disabled: var(--grey-three);
	--table-row-selected: var(--background-color);
	--logo-url: url(../img/Logo.png);
	--no-content-available-background-colour: #f8f8f8;
	--day-of-the-week-monday-background-colour: #ffe7a3;
	--day-of-the-week-tuesday-background-colour: #ffc580;
	--day-of-the-week-wednesday-background-colour: #caffde;
	--day-of-the-week-thursday-background-colour: #fedcf2;
	--day-of-the-week-friday-background-colour: #d8d8ff;
	--day-of-the-week-saturday-background-colour: #dddbda;
	--day-of-the-week-sunday-background-colour: #ffffff;
	--notification-unread-background-colour: #e5eef9;
	--notification-read-background-colour: #fafaf9;
	--system-notification-unread-background-colour: #f7ede7;
	--system-notification-read-background-colour: #fdf6f1;
	--table-stripe-odd-row: var(--module-background-color);
	--table-stripe-even-row: var(--table-row-alt-background-colour);
	--audit-value-green-highlight-color: #CAFFDE;
	--audit-value-red-highlight-color: #FEDADA;
	--audit-value-searched-highlight-color: #FACF51;
	--highlighted-container: var(--error-light-red);
}

[theme="pink"] {
	--accent: #933E6C;
	--accent-text: #933E6C;
	--accent-hover: #933E6Ccc;
	--accent-disabled: #933E6C66;
	--text-color: #242424;
	--text-color-alt: #FFF;
	--background-color: #fcf4f9;
	--field-background-color: #fff;
	--module-background-color: #ffffff;
	--error: #e6492d;
	--error-transparent: #e6492d1a;
	--header-background-colour: #933E6C;
	--navmenu-background-colour: #ffffff;
	--navmenu-hover-background-colour: #5d7191;
	--header-color: #242424;
	--label-colour: #242424;
	--header-pill-background-color: white;
	--icon-color: #565656;
	--icon-color-alt: #fff;
	--icon-color-highlight: #FC0088;
	--seperator-color: #eaedf3;
	--border-color: #c9c7c5;
	--tertiary-color: #706E6B;
	--card-header-color: #FFDCF2;
	--theme-example-content-color: #bbb;
	--icon-highlight: #933E6C;
	--link-colour: #1B6BE0;
	--JobStatus-none: #8F8F8F;
	--JobStatus-dormant: #FF2E6C;
	--JobStatus-on-approval: #1b6be0;
	--JobStatus-quotation: #603794;
	--JobStatus-on-hold: #969492;
	--JobStatus-ready-invoice: #1665d8;
	--JobStatus-closed-pending-pon: #E30000;
	--JobStatus-complete: #34aa44;
	--JobStatus-invoiced: #969492;
	--JobStatus-priority: #000;
	--JobStatus-integration: #000;
	--JobStatus-tasks-complete: #000;
	--JobStatus-live: #3E3E3C;
	--ComplaintStatus-Low: #3E3E3C;
	--ComplaintStatus-Medium: #EBA234;
	--ComplaintStatus-High: #FF2E6C;
	--ComplaintStatus-Closed: var(--text-color);
	--success-green: #34aa44;
	--Task-not-started: var(--text-color);
	--status-disabled-text: var(--text-color);
	--Task-in-progress: #090;
	--Task-complete: #006900;
	--Task-on-approval: #00f;
	--Task-approved: #0000fb;
	--Task-amends-required: #FF9E2C;
	--Task-on-hold: #999;
	--Task-abandoned: red;
	--Task-paused: #FF9E2C;
	--Task-background-not-started: var(--module-background-color);
	--Task-background-in-progress: #ebf7ed;
	--Task-background-complete: var(--module-background-color);
	--Task-background-on-approval: var(--module-background-color);
	--Task-background-approved: var(--module-background-color);
	--Task-background-amends-required: var(--module-background-color);
	--Task-background-on-hold: #cdcdcd;
	--Task-background-abandoned: #fde6e6;
	--Task-background-paused: #fff6ea;
	--Task-background-failed: #DC3545;
	--JobFlag-no-flagged: #f34545;
	--JobFlag-attention-required: #00f;
	--JobFlag-pending-information: #6161fb;
	--JobFlag-invoicing-issue: #facf55;
	--ItemStatus-live: #3E3E3C;
	--ItemStatus-complete: #34aa44;
	--ItemStatus-dormant: #FF2E6C;
	--ItemStatus-on-hold: #969492;
	--Status-background: #eee;
	--success-green-icn: #34aa44;
	--JobFlag-no-flagged-icn: #f34545;
	--JobFlag-attention-required-icn: #00f;
	--JobFlag-pending-information-icn: #6161fb;
	--JobFlag-invoicing-issue-icn: #facf55;
	--ItemStatus-live-icn: #3E3E3C;
	--ItemStatus-complete-icn: #34aa44;
	--ItemStatus-dormant-icn: #FF2E6C;
	--ItemStatus-on-hold-icn: #969492;
	--Status-background-icn: transparent;
	--field-disabled-color: #f7f8fa;
	--red-background: #FDEDEA;
	--blue-background: #EDF3FA;
	--green-background: #E3F3E5;
	--tube-stop-color: #933E6C;
	--tube-stop-color-alt: #FFDCF2;
	--table-header-background-colour: #f4f4fc;
	--table-row-alt-background-colour: #f8f8f8;
	--table-row-disabled: var(--grey-three);
	--table-row-selected: var(--background-color);
	--logo-url: url(../img/Logo.png);
	--no-content-available-background-colour: #f8f8f8;
	--day-of-the-week-monday-background-colour: #ffe7a3;
	--day-of-the-week-tuesday-background-colour: #ffc580;
	--day-of-the-week-wednesday-background-colour: #caffde;
	--day-of-the-week-thursday-background-colour: #fedcf2;
	--day-of-the-week-friday-background-colour: #d8d8ff;
	--day-of-the-week-saturday-background-colour: #dddbda;
	--day-of-the-week-sunday-background-colour: #ffffff;
	--notification-unread-background-colour: #e5eef9;
	--notification-read-background-colour: #fafaf9;
	--system-notification-unread-background-colour: #f7ede7;
	--system-notification-read-background-colour: #fdf6f1;
	--table-stripe-odd-row: var(--module-background-color);
	--table-stripe-even-row: var(--table-row-alt-background-colour);
	--audit-value-green-highlight-color: #CAFFDE;
	--audit-value-red-highlight-color: #FEDADA;
	--audit-value-searched-highlight-color: #FACF51;
	--highlighted-container: var(--error-light-red);
}

[theme="red"] {
	--accent: #E70A03;
	--accent-text: #E70A03;
	--accent-hover: #E70A03cc;
	--accent-disabled: #E70A0366;
	--text-color: #242424;
	--text-color-alt: #FFF;
	--background-color: #FCF4F4;
	--field-background-color: #fff;
	--module-background-color: #ffffff;
	--error: #e6492d;
	--error-transparent: #e6492d1a;
	--header-background-colour: #E70A03;
	--navmenu-background-colour: #ffffff;
	--navmenu-hover-background-colour: #5d7191;
	--header-color: #242424;
	--label-colour: #242424;
	--header-pill-background-color: white;
	--icon-color: #565656;
	--icon-color-alt: #fff;
	--icon-color-highlight: #E70A03;
	--seperator-color: #eaedf3;
	--border-color: #c9c7c5;
	--tertiary-color: #706E6B;
	--card-header-color: #FEDADA;
	--theme-example-content-color: #bbb;
	--icon-highlight: #E70A03;
	--link-colour: #1B6BE0;
	--JobStatus-none: #8F8F8F;
	--JobStatus-dormant: #FF2E6C;
	--JobStatus-on-approval: #1b6be0;
	--JobStatus-quotation: #603794;
	--JobStatus-on-hold: #969492;
	--JobStatus-ready-invoice: #1665d8;
	--JobStatus-closed-pending-pon: #E30000;
	--JobStatus-complete: #34aa44;
	--JobStatus-invoiced: #969492;
	--JobStatus-priority: #000;
	--JobStatus-integration: #000;
	--JobStatus-tasks-complete: #000;
	--JobStatus-live: #3E3E3C;
	--ComplaintStatus-Low: #3E3E3C;
	--ComplaintStatus-Medium: #EBA234;
	--ComplaintStatus-High: #FF2E6C;
	--ComplaintStatus-Closed: var(--text-color);
	--success-green: #34aa44;
	--Task-not-started: var(--text-color);
	--status-disabled-text: var(--text-color);
	--Task-in-progress: #090;
	--Task-complete: #006900;
	--Task-on-approval: #00f;
	--Task-approved: #0000fb;
	--Task-amends-required: #FF9E2C;
	--Task-on-hold: #999;
	--Task-abandoned: red;
	--Task-paused: #FF9E2C;
	--Task-background-not-started: var(--module-background-color);
	--Task-background-in-progress: #ebf7ed;
	--Task-background-complete: var(--module-background-color);
	--Task-background-on-approval: var(--module-background-color);
	--Task-background-approved: var(--module-background-color);
	--Task-background-amends-required: var(--module-background-color);
	--Task-background-on-hold: #cdcdcd;
	--Task-background-abandoned: #fde6e6;
	--Task-background-paused: #fff6ea;
	--Task-background-failed: #DC3545;
	--JobFlag-no-flagged: #f34545;
	--JobFlag-attention-required: #00f;
	--JobFlag-pending-information: #6161fb;
	--JobFlag-invoicing-issue: #facf55;
	--ItemStatus-live: #3E3E3C;
	--ItemStatus-complete: #34aa44;
	--ItemStatus-dormant: #FF2E6C;
	--ItemStatus-on-hold: #969492;
	--Status-background: #eee;
	--success-green-icn: #34aa44;
	--JobFlag-no-flagged-icn: #f34545;
	--JobFlag-attention-required-icn: #00f;
	--JobFlag-pending-information-icn: #6161fb;
	--JobFlag-invoicing-issue-icn: #facf55;
	--ItemStatus-live-icn: #3E3E3C;
	--ItemStatus-complete-icn: #34aa44;
	--ItemStatus-dormant-icn: #FF2E6C;
	--ItemStatus-on-hold-icn: #969492;
	--Status-background-icn: transparent;
	--field-disabled-color: #f7f8fa;
	--red-background: #FDEDEA;
	--blue-background: #EDF3FA;
	--green-background: #E3F3E5;
	--tube-stop-color: #E70A03;
	--tube-stop-color-alt: #FEDADA;
	--table-header-background-colour: #f4f4fc;
	--table-row-alt-background-colour: #f8f8f8;
	--table-row-disabled: var(--grey-three);
	--table-row-selected: var(--background-color);
	--logo-url: url(../img/Logo.png);
	--no-content-available-background-colour: #f8f8f8;
	--day-of-the-week-monday-background-colour: #ffe7a3;
	--day-of-the-week-tuesday-background-colour: #ffc580;
	--day-of-the-week-wednesday-background-colour: #caffde;
	--day-of-the-week-thursday-background-colour: #fedcf2;
	--day-of-the-week-friday-background-colour: #d8d8ff;
	--day-of-the-week-saturday-background-colour: #dddbda;
	--day-of-the-week-sunday-background-colour: #ffffff;
	--notification-unread-background-colour: #e5eef9;
	--notification-read-background-colour: #fafaf9;
	--system-notification-unread-background-colour: #f7ede7;
	--system-notification-read-background-colour: #fdf6f1;
	--table-stripe-odd-row: var(--module-background-color);
	--table-stripe-even-row: var(--table-row-alt-background-colour);
	--audit-value-green-highlight-color: #CAFFDE;
	--audit-value-red-highlight-color: #FEDADA;
	--audit-value-searched-highlight-color: #FACF51;
	--highlighted-container: var(--error-light-red);
}

[theme="darkone"] {
	--accent: #1F2933;
	--accent-text: #CCCCCC;
	--accent-hover: #1F2933cc;
	--accent-disabled: #1F293366;
	--text-color: #CCCCCC;
	--text-color-alt: #CCCCCC;
	--background-color: #323f4a;
	--field-background-color: #323f4a;
	--module-background-color: #3E4C59;
	--error: #f1707b;
	--error-transparent: #f1707b1a;
	--header-background-colour: #1F2933;
	--navmenu-background-colour: #3E4C59;
	--navmenu-hover-background-colour: #5d7191;
	--header-color: #CCCCCC;
	--label-colour: #CCCCCC;
	--header-pill-background-color: #3e4c59;
	--icon-color: #999;
	--icon-color-alt: #ffffff;
	--icon-color-highlight: #fff;
	--seperator-color: #eaedf3;
	--border-color: #c9c7c5;
	--tertiary-color: #969492;
	--card-header-color: #22303D;
	--theme-example-content-color: #bbb;
	--icon-highlight: #fff;
	--link-colour: #42bbff;
	--JobStatus-none: var(--text-color);
	--JobStatus-dormant: #FF2E6C;
	--JobStatus-on-approval: #1b6be0;
	--JobStatus-quotation: #603794;
	--JobStatus-on-hold: #969492;
	--JobStatus-ready-invoice: #1665d8;
	--JobStatus-closed-pending-pon: #E30000;
	--JobStatus-complete: #34aa44;
	--JobStatus-invoiced: #969492;
	--JobStatus-priority: var(--text-color);
	--JobStatus-integration: var(--text-color);
	--JobStatus-tasks-complete: var(--text-color);
	--JobStatus-live: var(--text-color);
	--ComplaintStatus-Low: #3E3E3C;
	--ComplaintStatus-Medium: #EBA234;
	--ComplaintStatus-High: #FF2E6C;
	--ComplaintStatus-Closed: var(--text-color);
	--CarStatus-customer-qa: #4299f3;
	--CarStatus-base-background: #706e6b4d;
	--success-green: #34aa44;
	--Task-not-started: var(--text-color);
	--status-disabled-text: var(--text-color);
	--Task-in-progress: #00cc00;
	--Task-complete: #009c00;
	--Task-on-approval: #007bff;
	--Task-approved: #007bff;
	--Task-amends-required: #FF9E2C;
	--Task-on-hold: #999;
	--Task-abandoned: red;
	--Task-paused: #FF9E2C;
	--Task-background-not-started: var(--module-background-color);
	--Task-background-in-progress: #ebf7ed;
	--Task-background-complete: #cdc; /* Foreground colour is difficult to read on dark themes */
	--Task-background-on-approval: #BCCDDF; /* Foreground colour is difficult to read on dark themes */
	--Task-background-approved: #BCCDDF; /* Foreground colour is difficult to read on dark themes */
	--Task-background-amends-required: var(--module-background-color);
	--Task-background-on-hold: #cdcdcd;
	--Task-background-abandoned: #fde6e6;
	--Task-background-paused: #fff6ea;
	--Task-background-failed: #DC3545;
	--JobFlag-no-flagged: var(--text-color);
	--JobFlag-attention-required: var(--text-color);
	--JobFlag-pending-information: var(--text-color);
	--JobFlag-invoicing-issue: var(--text-color);
	--ItemStatus-live: var(--text-color);
	--ItemStatus-complete: var(--text-color);
	--ItemStatus-dormant: var(--text-color);
	--ItemStatus-on-hold: var(--text-color);
	--Status-background: var(--text-color);
	--success-green-icn: #34aa44;
	--JobFlag-no-flagged-icn: #f34545;
	--JobFlag-attention-required-icn: #00f;
	--JobFlag-pending-information-icn: #6161fb;
	--JobFlag-invoicing-issue-icn: #facf55;
	--ItemStatus-live-icn: #3E3E3C;
	--ItemStatus-complete-icn: #34aa44;
	--ItemStatus-dormant-icn: #FF2E6C;
	--ItemStatus-on-hold-icn: #969492;
	--Status-background-icn: transparent;
	--field-disabled-color: var(--module-background-color);
	--red-background: #fc260055;
	--blue-background: #0075fa55;
	--green-background: #00f22055;
	--grey-background: var(--grey-nine);
	--tube-stop-color: #1F2933;
	--tube-stop-color-alt: #22303D;
	--table-header-background-colour: var(--background-color);
	--table-row-alt-background-colour: rgba(255, 255, 255, 0.05);
	--table-row-disabled: #364450;
	--table-row-selected: var(--background-color);
	--logo-url: url(../img/Logo-dark.png);
	--no-content-available-background-colour: #465563;
	--day-of-the-week-monday-background-colour: #ffe7a3;
	--day-of-the-week-tuesday-background-colour: #ffc580;
	--day-of-the-week-wednesday-background-colour: #caffde;
	--day-of-the-week-thursday-background-colour: #fedcf2;
	--day-of-the-week-friday-background-colour: #d8d8ff;
	--day-of-the-week-saturday-background-colour: #dddbda;
	--day-of-the-week-sunday-background-colour: #ffffff;
	--notification-unread-background-colour: #788ea9;
	--notification-read-background-colour: #35434e;
	--system-notification-unread-background-colour: #f7ede7;
	--system-notification-read-background-colour: #fdf6f1;
	--table-stripe-odd-row: var(--table-row-alt-background-colour);
	--table-stripe-even-row: var(--module-background-color);
	--audit-value-green-highlight-color: #CAFFDE;
	--audit-value-red-highlight-color: #FEDADA;
	--audit-value-searched-highlight-color: #FACF51;
	--message-text: #242424;
	--highlighted-container: var(--module-background-color);
}

[theme="darktwo"] {
	--accent: #212121;
	--accent-text: #CCCCCC;
	--accent-hover: #212121cc;
	--accent-disabled: #21212166;
	--text-color: #CCCCCC;
	--text-color-alt: #CCCCCC;
	--background-color: #424242;
	--field-background-color: #424242;
	--module-background-color: #616161;
	--error: #f1707b;
	--error-transparent: #f1707b1a;
	--header-background-colour: #212121;
	--navmenu-background-colour: #616161;
	--navmenu-hover-background-colour: #5d7191;
	--header-color: #CCCCCC;
	--label-colour: #CCCCCC;
	--header-pill-background-color: #616161;
	--icon-color: #999;
	--icon-color-alt: #ffffff;
	--icon-color-highlight: #fff;
	--seperator-color: #eaedf3;
	--border-color: #c9c7c5;
	--tertiary-color: #969492;
	--card-header-color: #353131;
	--theme-example-content-color: #bbb;
	--icon-highlight: #fff;
	--link-colour: #42bbff;
	--JobStatus-none: var(--text-color);
	--JobStatus-dormant: #FF2E6C;
	--JobStatus-on-approval: #1b6be0;
	--JobStatus-quotation: #603794;
	--JobStatus-on-hold: #969492;
	--JobStatus-ready-invoice: #1665d8;
	--JobStatus-closed-pending-pon: #E30000;
	--JobStatus-complete: #34aa44;
	--JobStatus-invoiced: #969492;
	--JobStatus-priority: var(--text-color);
	--JobStatus-integration: var(--text-color);
	--JobStatus-tasks-complete: var(--text-color);
	--JobStatus-live: var(--text-color);
	--ComplaintStatus-Low: #3E3E3C;
	--ComplaintStatus-Medium: #EBA234;
	--ComplaintStatus-High: #FF2E6C;
	--ComplaintStatus-Closed: var(--text-color);
	--CarStatus-customer-qa: #4299f3;
	--CarStatus-base-background: #6f6e6a99;
	--success-green: #34aa44;
	--Task-not-started: var(--text-color);
	--status-disabled-text: var(--text-color);
	--Task-in-progress: #00cc00;
	--Task-complete: #009c00;
	--Task-on-approval: #007bff;
	--Task-approved: #007bff;
	--Task-amends-required: #FF9E2C;
	--Task-on-hold: #999;
	--Task-abandoned: red;
	--Task-paused: #FF9E2C;
	--Task-background-not-started: var(--module-background-color);
	--Task-background-in-progress: #ebf7ed;
	--Task-background-complete: #cdc; /* Foreground colour is difficult to read on dark themes */
	--Task-background-on-approval: #BCCDDF; /* Foreground colour is difficult to read on dark themes */
	--Task-background-approved: #BCCDDF; /* Foreground colour is difficult to read on dark themes */
	--Task-background-amends-required: var(--module-background-color);
	--Task-background-on-hold: #cdcdcd;
	--Task-background-abandoned: #fde6e6;
	--Task-background-paused: #fff6ea;
	--Task-background-failed: #DC3545;
	--JobFlag-no-flagged: var(--text-color);
	--JobFlag-attention-required: var(--text-color);
	--JobFlag-pending-information: var(--text-color);
	--JobFlag-invoicing-issue: var(--text-color);
	--ItemStatus-live: var(--text-color);
	--ItemStatus-complete: var(--text-color);
	--ItemStatus-dormant: var(--text-color);
	--ItemStatus-on-hold: var(--text-color);
	--Status-background: var(--text-color);
	--success-green-icn: #34aa44;
	--JobFlag-no-flagged-icn: #f34545;
	--JobFlag-attention-required-icn: #00f;
	--JobFlag-pending-information-icn: #6161fb;
	--JobFlag-invoicing-issue-icn: #facf55;
	--ItemStatus-live-icn: #3E3E3C;
	--ItemStatus-complete-icn: #34aa44;
	--ItemStatus-dormant-icn: #FF2E6C;
	--ItemStatus-on-hold-icn: #969492;
	--Status-background-icn: transparent;
	--field-disabled-color: var(--module-background-color);
	--red-background: #fc260055;
	--blue-background: #0075fa55;
	--green-background: #00f22055;
	--grey-background: var(--grey-nine);
	--tube-stop-color: #212121;
	--tube-stop-color-alt: #353131;
	--table-header-background-colour: var(--background-color);
	--table-row-alt-background-colour: rgba(255, 255, 255, 0.05);
	--table-row-disabled: #555555;
	--table-row-selected: var(--background-color);
	--logo-url: url(../img/Logo-dark.png);
	--no-content-available-background-colour: #6b6b6b;
	--day-of-the-week-monday-background-colour: #ffe7a3;
	--day-of-the-week-tuesday-background-colour: #ffc580;
	--day-of-the-week-wednesday-background-colour: #caffde;
	--day-of-the-week-thursday-background-colour: #fedcf2;
	--day-of-the-week-friday-background-colour: #d8d8ff;
	--day-of-the-week-saturday-background-colour: #dddbda;
	--day-of-the-week-sunday-background-colour: #ffffff;
	--notification-unread-background-colour: #788ea9;
	--notification-read-background-colour: #524f4f;
	--system-notification-unread-background-colour: #f7ede7;
	--system-notification-read-background-colour: #fdf6f1;
	--table-stripe-odd-row: var(--table-row-alt-background-colour);
	--table-stripe-even-row: var(--module-background-color);
	--message-text: #242424;
	--audit-value-green-highlight-color: #CAFFDE;
	--audit-value-red-highlight-color: #FEDADA;
	--audit-value-searched-highlight-color: #FACF51;
	--highlighted-container: var(--module-background-color);
}

html, body {
	background-color: var(--background-color);
	font-family: Inter;
	letter-spacing: normal;
	font-stretch: normal;
	font-style: normal;
	font-weight: normal;
	color: var(--text-color);
	font-size: 13px;
	background-color: var(--background-color);
}

tbody, td {
	letter-spacing: normal;
	font-stretch: normal;
	font-style: normal;
	font-weight: normal;
	font-size: 13px;
}

footer {
	font-size: 0.76rem;
}

h1 {
	margin: auto 0;
	font-weight: bold;
	font-size: 1.84rem;
	color: var(--header-color);
	line-height: inherit;
}

h2.modal-title {
	font-weight: bold;
	font-size: 20px;
	color: var(--header-color);
	line-height: inherit;
}

h2 {
	font-weight: bold;
	font-size: 1.38rem;
	color: var(--header-color);
	line-height: inherit;
}

h3 {
	font-weight: bold;
	font-size: 1.23rem;
	color: var(--header-color);
	line-height: inherit;
}

h4 {
	font-weight: bold;
	font-size: 1.07rem;
	color: var(--header-color);
	line-height: inherit;
}

label, .form-group label, th {
	font-size: 0.92rem;
	font-weight: bold;
	color: var(--label-colour);
}

label, .form-group label {
	margin-top: 0;
	margin-bottom: 0;
}

.form-group {
	margin-bottom: 0.5rem;
}

button {
	padding-left: 0.75rem;
	padding-right: 0.75rem;
	font-size: 0.92rem;
	font-weight: bold;
	text-transform: capitalize;
}

	button:hover {
		opacity: 80%;
	}

	button:disabled {
		cursor: default;
		opacity: 0.65;
	}
/*MySGS5 new styling START*/
.pill {
	border: 1px solid var(--border-color);
	border-radius: 4px;
	background-color: var(--module-background-color);
}

.pill-border-radius {
	border-radius: 4px;
}

.pill table.last-row-borderless tbody tr:last-of-type {
	border: 0 !important;
}

.pill.flat-bottom {
	border-bottom-right-radius: 0;
	border-bottom-left-radius: 0;
}

.pill.flat-top {
	border-top-right-radius: 0;
	border-top-left-radius: 0;
}

.theme-example-content {
	height: 0.5rem;
	background-color: var(--theme-example-content-color);
	width: 100%
}

	.theme-example-content.last {
		width: 50%
	}

.task-details-pill {
	max-height: 73vh;
	overflow-y: auto;
}

.table thead th a {
	margin: auto 0;
}

.thead-background th {
	background-color: var(--table-header-background-colour);
}

.table-striped > tbody > tr:nth-of-type(even) {
	background-color: var(--table-stripe-even-row);
}

.table-striped > tbody > tr:nth-of-type(odd) {
	background-color: var(--table-stripe-odd-row);
}

.table-striped-end {
	height: 3rem;
}

.table > tbody > tr.table-row-selected {
	background-color: var(--table-row-selected);
	color: var(--text-color);
}

.ba-add-stage-migrate-table {
	border: 1px solid var(--border-color);
	background-color: var(--module-background-color);
}

.filters-dropdown {
	z-index: 999;
	width: 32rem;
	right: 50px;
	top: 95px;
}

.overlay {
	display: none;
	position: fixed;
	width: 100vw;
	height: 100vh;
	/* transparent black */
	background: rgba(0, 0, 0, 0.7);
	z-index: 998;
	opacity: 0;
	/* animate the transition */
	transition: all 0.5s ease-in-out;
}

	.overlay.active {
		display: block;
		opacity: 1;
	}

.wrapper {
	display: flex;
	align-items: stretch;
}

#sidebar {
	width: 250px;
	position: absolute;
	top: 0;
	left: 0;
	height: 100vh;
	background-color: var(--navmenu-background-colour);
	transition: all 0.3s ease;
	z-index: 999;
}

	#sidebar.collapsed {
		width: 50px;
		transition: width 0.3s ease;
		text-align: center;
	}

		#sidebar.collapsed .sidebar-icontext {
			display: none;
		}

		#sidebar.collapsed .dropdown .dropdown-content .sidebar-icontext {
			display: block;
		}

	#sidebar ul li a,
	#sidebar ui li .dropdown .dropdown-content li a {
		text-align: left;
		color: var(--icon-color);
	}

	#sidebar.collapsed ul li a,
	#sidebar.collapsed ui li .dropdown .dropdown-content li a {
		text-align: center;
	}

		#sidebar.collapsed ul li a i,
		#sidebar.collapsed ui li .dropdown .dropdown-content li a i {
			margin-right: 0;
			display: block;
			font-size: 1.6em;
			margin-bottom: 5px;
		}

	#sidebar.collapsed ul ul a {
		padding: 10px !important;
	}

	#sidebar .sidebar-header {
		padding: 20px;
	}

	#sidebar .sidebar-icontext {
		display: inline;
	}

	#sidebar ul.components {
		padding: 20px 0;
	}

	#sidebar ul li a,
	#sidebar ui li .dropdown .dropdown-content li a {
		padding: 10px;
		display: block;
	}

		#sidebar ul li a:hover,
		#sidebar ui li .dropdown .dropdown-content li a:hover,
		#sidebar .dropdown-content a:hover,
		#sidebar .dropdown.list-group-item-action:hover,
		#sidebar .dropdown.list-group-item-action:focus {
			background-color: var(--background-color);
		}

		#sidebar ul li a i,
		#sidebar ui li .dropdown .dropdown-content li a i {
			margin-right: 10px;
			font-size: 1.6em;
		}

	#sidebar .dropdown {
		position: relative;
	}

	#sidebar .dropdown-content {
		top: 0;
		left: 249px;
		min-width: 75px;
		max-width: 50vw;
		white-space: nowrap;
		overflow: hidden;
		border: 1px solid #dee2e6;
		border-radius: 4px;
		background-color: var(--navmenu-background-colour);
	}

	#sidebar.collapsed .dropdown-content {
		left: 49px;
	}

	#sidebar .dropdown-content a {
		padding: 11px 16px;
		text-align: left !important;
	}

	#sidebar.collapsed .dropdown-content a {
		padding: 14px 16px;
	}

	#sidebar .dropdown:hover .dropdown-content {
		display: block;
	}

	#sidebar .list-group-item {
		padding: 0;
	}

	#sidebar .btn-group.list-group-item {
		border: 0;
	}

	#sidebar .btn-group.dropdown.list-group-item-action:hover {
		background-color: revert;
	}

	#sidebar .dropdown .dropdown-content a {
		font-size: 13px;
	}

		#sidebar .dropdown .dropdown-content a i {
			display: none;
		}

.navmenu-divider-hr {
	border-color: var(--header-background-colour);
	margin-left: 0.5rem;
	margin-right: 0.5rem;
	margin-bottom: 0;
	margin-top: 0;
}

a[data-toggle="collapse"] {
	position: relative;
}

#content {
	position: absolute;
	left: 50px;
	width: calc(100% - 50px);
	padding: 20px;
	min-height: 100vh;
	transition: width 0.3s;
}

.standard-page-body-restricted {
	overflow: auto;
	min-height: 60vh;
	max-height: 60vh;
}

@media(min-height: 801px) {
	.standard-page-body-restricted {
		min-height: 77vh;
		max-height: 77vh;
	}

	.job-page-body {
		min-height: 70vh;
		max-height: 70vh;
	}

	.page-body {
		min-height: calc(75vh + 1rem);
		max-height: calc(75vh - 3rem);
	}
}


@media(min-height: 1000px) {

	.standard-page-body-restricted {
		min-height: 80vh;
		max-height: 80vh;
	}

	.job-page-body {
		min-height: 75vh;
		max-height: 75vh;
	}

	.page-body {
		min-height: calc(80vh + 1rem);
		max-height: calc(80vh - 3rem);
	}
}



@media (max-width: 767px) {
	#content {
		left: 0px;
		width: 100%;
	}

		#content.expandabled-side-bar {
			width: calc(100% - 50px);
			left: 50px;
		}

	#sidebar, #sidebar.collapsed {
		min-width: 50px;
		max-width: 50px;
		text-align: center;
		margin-left: 0;
	}

		#sidebar ul li a {
			padding: 15px 5px;
		}

			#sidebar ul li a span {
				font-size: 0.85em;
			}

			#sidebar ul li a i {
				margin-right: 0;
				display: block;
				font-size: 1.3em;
			}

		#sidebar ul ul a {
			padding: 10px !important;
		}

	.filters-dropdown {
		width: 23rem;
		right: 35px;
		top: 125px;
	}
}


a {
	cursor: pointer;
	color: var(--link-colour);
}

	a:hover {
		opacity: 0.8;
		text-decoration: none;
	}

	a.btn-icon {
		padding: 0.5rem;
		text-decoration: none;
	}

#blazor-error-ui {
	background-color: var(--red-background);
	color: var(--text-color)
}

.mysgs5-logo {
	width: 2.0rem;
	height: 2.0rem;
	align-self: center;
	content: var(--logo-url);
}

.poa-unlink {
	width: 2.0rem;
	height: 2.0rem;
	align-self: center;
	content: var(--unlink-url);
}

.btn.btn-icon {
	width: 2rem;
}

.table-icon {
	display: inline-block;
	color: var(--icon-color);
	vertical-align: middle;
	opacity: 100% !important;
}

.button-primary, .button-secondary, .button-tertiary {
	height: 2.5rem;
	padding: 0;
	border: solid 1px;
	border-radius: 4px;
	color: var(--text-color-alt);
}

.button-primary {
	padding-left: 0.5rem;
	padding-right: 1rem;
	background-color: var(--accent);
	border-color: var(--accent);
	font-weight: bold;
	font-size: 0.95rem;
}

	.button-primary > i, .button-primary > span {
		vertical-align: middle;
		font-size: 1.5rem;
	}

.button-secondary {
	color: var(--tertiary-color);
	border: solid 1px var(--tertiary-color);
}

.button-tertiary {
	width: 2.5rem;
	background-color: inherit;
	color: var(--tertiary-color);
	font-weight: bold;
	font-size: 0.95rem;
	border: solid 1px var(--border-color);
}

	.button-tertiary > i, .button-tertiary > span {
		vertical-align: middle;
		font-size: 1.5rem;
	}

.button-profile-icons {
	height: 2.5rem;
	padding: 0;
	border: 0;
	color: var(--text-color);
	background-color: transparent;
}

.custom-select-invoice-sm {
	padding: 0.3rem;
	height: unset;
}

.i.material-icons {
	color: var(--icon-color);
}

.span.material-icons {
	color: var(--icon-color);
}

.light-icon {
	color: white;
}

.table .thead-light th {
	color: var(--text-color);
	background-color: var(--background-color);
	border-color: var(--border-color);
}

table > thead > tr > th {
	position: sticky;
	top: 0;
	background-color: var(--module-background-color);
}

input.form-control, select.custom-select {
	border-color: var(--border-color);
}

textarea.form-control {
	border-color: var(--border-color);
}

.nav-tabs.nav-tabs-line {
	border-bottom: none;
	border-top: 1px solid var(--border-color);
	overflow-x: auto;
	overflow-y: hidden;
}

	.nav-tabs.nav-tabs-line.nav.nav-tabs .nav-link, .nav-tabs.nav-tabs-line a.nav-link {
		color: var(--label-colour);
		text-decoration: none;
	}

.navigation-pill {
	margin-bottom: 4rem; /*for footer*/
	overflow: hidden;
	padding: 1.5rem 1.5rem 1.5rem 1.5rem;
}

	.navigation-pill .nav-tabs.nav-tabs-line {
		/*.nav-tabs.nav-tabs-line Remove this class in future when all scenarios are taken care off*/
		border-bottom: 1px solid var(--border-color);
		border-top: 0;
	}

		.navigation-pill .nav-tabs.nav-tabs-line.nav-tabs-line-brand.nav.nav-tabs .nav-link:hover, .navigation-pill .nav-tabs.nav-tabs-line.nav-tabs-line-brand a.nav-link:hover {
			border-bottom: 1px solid var(--border-color);
		}

.mh-60-overflow-auto {
	max-height: 60vh;
	overflow: auto;
}

.invalid-feedback {
	display: block;
	color: var(--error);
}

.was-validated .form-control:invalid, input[type=checkbox].form-control.is-invalid {
	margin-top: 0.1rem;
	padding-right: 0;
	background-image: none;
	background-repeat: no-repeat;
	background-position: 0;
	background-size: 0;
	border-color: var(--error);
	background-color: var(--error-transparent);
	-moz-appearance: none;
	-webkit-appearance: none;
	-o-appearance: none;
}

.form-control.is-invalid:not([type='checkbox']) {
	border-color: var(--error);
	background-color: var(--error-transparent);
}

.form-control.is-invalid > input {
	background-color: transparent;
}

.form-control.is-invalid > span.material-icons {
	margin-left: -1em;
}

.despatch-address-not-verified {
	background-color: var(--red-background);
}

.despatch-address-verified {
	background-color: var(--green-background);
}


.sticky-element-inside-module {
	position: sticky;
	position: -webkit-sticky;
	top: 0;
	background-color: var(--module-background-color);
	z-index: 1;
}

input[type="checkbox"] {
	width: 18px;
	height: 18px;
	accent-color: var(--accent);
}


	input[type="radio"]:focus,
	input[type="checkbox"]:focus {
		/* Provide a fallback style for browsers
	 that don't support :focus-visible */
		outline-color: -webkit-focus-ring-color;
		outline-style: solid;
		outline-width: 1px;
	}

@supports selector(:focus-visible) {
	input[type="radio"]:focus,
	input[type="checkbox"]:focus {
		/* Remove the focus indicator on mouse-focus for browsers
	   that do support :focus-visible */
		outline: none;
		background: transparent;
	}
}

input[type="radio"]:focus-visible,
input[type="checkbox"]:focus-visible {
	/* Draw a focus style for
	 keyboard-focus on browsers that do support
	 :focus-visible */
	outline-color: -webkit-focus-ring-color;
	outline-style: solid;
	outline-width: 1px;
}

/*MySGS5 new styling END*/
/* Keentheme overriding START */
.btn {
	cursor: pointer;
	text-transform: capitalize;
	font-weight: bold;
	font-size: 12px !important;
	padding-left: 12px;
	padding-right: 12px;
	height: 2.5rem;
	padding-top: 7px;
}

.btn-pagination {
	padding-left: 6px;
	padding-right: 6px;
	margin-left: 6px;
	margin-right: 6px;
	border-radius: 10px;
	padding-top: 2px;
	padding-bottom: 2px;
}

.btn-pagination-active {
	background-color: var(--accent);
	color: var(--text-color-alt);
}

.btn-primary:not(:disabled):not(.disabled):active, .btn-primary:not(:disabled):not(.disabled).active, .show > .btn-primary.dropdown-toggle {
	background-color: var(--accent);
	color: var(--text-color-alt);
}
/*.btn-primary:not(:disabled):not(.disabled):not(.custom-extended-dropdown):active, .btn-primary:not(:disabled):not(.custom-extended-dropdown):not(.disabled).active, .show > .btn-primary:not(.custom-extended-dropdown).dropdown-toggle {*/

.btn-primary.disabled {
	background-color: var(--accent-disabled);
	border-color: var(--accent-disabled);
}

.btn-primary, .btn-primary:active, .btn-primary:not(:disabled):not(.disabled):active {
	background-color: var(--accent);
	border-color: var(--accent);
	text-transform: capitalize;
	color: var(--text-color-alt);
}

	.btn-primary:hover {
		background-color: var(--accent-hover);
		border-color: var(--accent-hover);
	}

	.btn-primary:disabled {
		background-color: var(--accent-disabled);
		border-color: var(--accent-disabled);
	}

.btn-secondary, .btn-secondary:focus, .btn-secondary:active, .btn-secondary:not(:disabled):not(.disabled):active {
	border-color: var(--accent);
	color: var(--text-color);
	background-color: inherit;
	text-transform: inherit;
}

	.btn-secondary:hover, .btn-secondary:enabled:hover {
		border-color: var(--accent-hover);
		color: var(--accent-hover);
		background-color: inherit;
	}

	.btn-secondary.disabled, .btn-secondary:disabled {
		border-color: var(--accent-disabled);
		color: var(--accent-disabled);
	}

.btn-outline-primary {
	color: var(--accent);
	border-color: var(--accent);
}

.btn-tertiary, .btn-tertiary:focus, .btn-tertiary:active, .btn-tertiary:not(:disabled):not(.disabled):active {
	border-color: var(--border-color);
	color: var(--tertiary-color);
	background-color: inherit;
	text-transform: inherit;
}

	.btn-tertiary:hover, .btn-tertiary:enabled:hover {
		color: var(--tertiary-color);
	}

	.btn-tertiary:disabled {
		border-color: var(--tertiary-color);
		color: var(--tertiary-color);
	}

.btn.btn-outline-secondary, .btn.btn-outline-secondary:focus, .btn.btn-outline-secondary:active, .btn.btn-outline-secondary:not(:disabled):not(.disabled):active {
	color: var(--text-color);
}

	.btn.btn-outline-secondary:hover, .btn.btn-outline-secondary:enabled:hover {
		border-color: var(--tertiary-color);
		color: var(--tertiary-color);
		background-color: inherit;
	}

	.btn.btn-outline-secondary:disabled {
		border-color: var(--tertiary-color);
		color: var(--tertiary-color);
	}

.btn-icon {
	vertical-align: middle;
	font-size: 1.55rem;
	color: var(--icon-color);
}

.btn-icon-sm {
	height: unset;
	padding: 0;
}


.job-status-selectlist {
	color: var(--text-color);
}

	.job-status-selectlist:enabled:hover {
		color: var(--tertiary-color);
	}

.status-text {
	color: var(--text-color);
	vertical-align: bottom;
	margin-left: 8px;
}

.dropdown-menu {
	background-color: var(--module-background-color);
}

tr.expanded-content > td {
	background-color: var(--module-background-color);
}

.expanded-content {
	background-color: var(--module-background-color);
}

.btn.btn-link:focus, .btn.btn-link:hover, .btn.btn-link.active {
	background-color: transparent;
	color: var(--accent-hover);
}

.btn-outline-primary-toggle:hover {
	background-color: var(--accent);
	border-color: var(--accent);
}

.btn-success, .btn-success:hover, .btn-success:disabled {
	background-color: var(--success-green);
	border-color: var(--success-green);
}

.btn-success-light, .btn-success-light:hover, .btn-success-light:disabled {
	background-color: var(--success-light-green);
	border: solid var(--success-green) 1px;
}

.btn-error, .btn-error:hover {
	background-color: var(--error-red);
	border-color: var(--error-red);
}

.dropdown, .btn-secondary {
	background-color: var(--module-background-color);
}

.dropdown, .btn-secondary, .kt-subheader__search {
	background-color: transparent;
}

.dropdown-menu > li > a, .dropdown-menu > .dropdown-item {
	text-decoration: none;
}

.dropdown-item {
	color: var(--text-color);
}

	.dropdown-item.active, .dropdown-item:active {
		background-color: var(--accent);
	}

	.dropdown-item:hover, .dropdown-item:focus {
		background-color: var(--background-color);
		color: var(--text-color);
	}

.kt-portlet {
	background-color: inherit;
	box-shadow: 0px 0px;
}

input, button, select, optgroup, textarea, .tooltip {
	font-family: inherit;
}

.table {
	color: inherit;
	background-color: transparent;
}

.module-background-color {
	background-color: var(--module-background-color);
}

.theme-example {
	cursor: pointer;
}

.theme-example-body {
	border: 1px solid var(--border-color);
	border-radius: 4px;
	background-color: var(--background-color);
}

	.theme-example-body > div {
		/*This breaks our rule of not defining standard colors anywhere but the body tag, however these are used to show other themes than the current one. */
		color: var(--text-color);
	}

		.theme-example-body > div:first-child {
			background-color: var(--accent);
		}

/*	.theme-example > h2, .theme-example > div:nth-child(2) {
		color: var(--text-color-alt);
		background-color: var(--background-color);
	}*/
/*		.theme-example > div:last-child {
			color: var(--text-color);
			background-color: var(--header-pill-background-color);
		}*/

.icn-text {
	/* This is used to prevent icons used within input groups from appearing as greyed-out - see Bug 111666 */
	color: var(--label-colour) !important;
}

.operator-instruction-menu {
	background-color: var(--background-color);
}

.dropzone-list.empty-dropzone-list, .card-header, .job-item-row-background.expanded, .accordion .card .card-header {
	background-color: var(--card-header-color);
}

.dropdown-content li > .fake-href {
	color: var(--text-color);
}

.w-150 {
	width: 150%;
}

.breadcrumb {
	background-color: inherit;
}

.empty-dropzone-list {
	height: 3.46rem;
}

.nav-tabs.nav-tabs-line.nav-tabs-line-brand.nav.nav-tabs .nav-link.active, .nav-tabs.nav-tabs-line.nav-tabs-line-brand a.nav-link.active {
	height: 1.0rem;
	margin-top: 0.7rem;
	padding: 1rem;
	background: var(--accent);
	border-radius: 30px;
	color: var(--text-color-alt);
	border-bottom-color: var(--module-background-color);
}

.nav-tabs.nav-tabs-line.nav-tabs-line-brand.nav.nav-tabs .nav-link:hover, .nav-tabs.nav-tabs-line.nav-tabs-line-brand a.nav-link:hover {
	border-bottom-color: var(--module-background-color);
}

.nav-tabs.nav-tabs-line.nav-tabs-line-brand.nav-tabs-line-2x, .nav-tabs.nav-tabs-line.nav-tabs-line-brand.nav-tabs-line-3x {
	border-bottom-color: var(--module-background-color);
}

.nav-tabs.nav-tabs-line.nav-tabs-line-3x {
	border-bottom-width: 3px;
}

	.nav-tabs.nav-tabs-line.nav-tabs-line-3x .nav-item {
		margin-bottom: 0;
	}

.kt-portlet.profile-portlet {
	background-color: var(--module-background-color);
}

.kt-nav.kt-nav--bolder .kt-nav__item .kt-nav__link .kt-nav__link-text, .kt-menu__link-text-display {
	color: var(--text-color);
}

.kt-nav .kt-nav__item > .kt-nav__link.active .kt-nav__link-text, .kt-nav .kt-nav__item:hover:not(.kt-nav__item--disabled):not(.kt-nav__item--sub) > .kt-nav__link .kt-nav__link-text, .kt-nav .kt-nav__item:hover:not(.kt-nav__item--disabled):not(.kt-nav__item--sub) > .kt-nav__link .kt-nav__link-arrow, .kt-nav.kt-nav--v4 .kt-nav__item:hover:not(.kt-nav__item--disabled):not(.kt-nav__item--sub) > .kt-nav__link .kt-nav__link-text, .kt-nav.kt-nav--v4 .kt-nav__item.active > .kt-nav__link .kt-nav__link-text, .kt-nav.kt-nav--v4 .kt-nav__item.kt-nav__link--active > .kt-nav__link .kt-nav__link-text {
	color: var(--accent-text);
}

.kt-nav .kt-nav__item > .kt-nav__link .kt-nav__link-arrow, .kt-nav .kt-nav__item:hover:not(.kt-nav__item--disabled):not(.kt-nav__item--sub) > .kt-nav__link .kt-nav__link-icon, .kt-nav .kt-nav__item > .kt-nav__link .kt-nav__link-icon, .kt-aside-menu .kt-menu__nav > .kt-menu__item > .kt-menu__heading .kt-menu__link-icon, .kt-aside-menu .kt-menu__nav > .kt-menu__item > .kt-menu__link .kt-menu__link-icon, a.btn-icon, .icon-default, .kt-aside--minimize .kt-aside-menu .kt-menu__nav > .kt-menu__item > .kt-menu__link > .kt-menu__link-icon {
	color: var(--icon-color);
}

.icon-default-alt {
	color: var(--icon-color-alt);
}

.kt-nav .kt-nav__item > .kt-nav__link.active .kt-nav__link-arrow, .kt-nav .kt-nav__item:hover:not(.kt-nav__item--disabled):not(.kt-nav__item--sub) > .kt-nav__link .kt-nav__link-icon, .kt-nav .kt-nav__item > .kt-nav__link.active .kt-nav__link-icon, a.btn-icon.active, a.btn-icon:active, .icn-active {
	color: var(--icon-color-highlight);
}

.kt-nav.kt-nav--v4 .kt-nav__item:hover:not(.kt-nav__item--disabled):not(.kt-nav__item--sub) > .kt-nav__link, .kt-nav.kt-nav--v4 .kt-nav__item > .kt-nav__link.active, .kt-nav.kt-nav--v4 .kt-nav__item.kt-nav__link--active > .kt-nav__link {
	background-color: var(--background-color);
}

.kt-aside-menu .kt-menu__nav > .kt-menu__item:not(.kt-menu__item--parent):not(.kt-menu__item--open):not(.kt-menu__item--here):not(.kt-menu__item--active):hover > .kt-menu__heading .kt-menu__link-icon, .kt-aside-menu .kt-menu__nav > .kt-menu__item:not(.kt-menu__item--parent):not(.kt-menu__item--open):not(.kt-menu__item--here):not(.kt-menu__item--active):hover > .kt-menu__link .kt-menu__link-icon, a:hover {
	color: var(--icon-color-highlight);
}

.custom-control-input:checked > .custom-control-label::before {
	background-color: var(--accent);
	border-color: var(--accent);
}

.custom-checkbox .custom-control-input:disabled:checked > .custom-control-label::before {
	background-color: var(--accent-disabled);
	border-color: var(--accent-disabled);
}

.kt-aside-menu .kt-menu__nav > .kt-menu__item:not(.kt-menu__item--parent):not(.kt-menu__item--open):not(.kt-menu__item--here):not(.kt-menu__item--active):hover > .kt-menu__heading, .kt-aside-menu .kt-menu__nav > .kt-menu__item:not(.kt-menu__item--parent):not(.kt-menu__item--open):not(.kt-menu__item--here):not(.kt-menu__item--active):hover > .kt-menu__link {
	background-color: var(--background-color);
}

/*.dropdown-menu {
	background-color:var(--background-color);
	color:var(--text-color);
}*/

.results-count-display {
	margin-left: 10px;
}

/*Keentheme overriding END*/
.expanded-result-label {
	color: var(--text-color);
}

	.expanded-result-label:hover {
		background: var(--background-color);
	}

tr.disabled {
	background-color: var(--table-row-disabled);
}

.table-hover > tbody > tr:not(.border):hover, .col-resizing {
	background-color: var(--background-color);
	color: var(--text-color);
}

.thumbnail-mouseover {
	top: 50%;
	left: 50%;
	position: fixed;
	transform: translate3d(-50%, -50%, 0px);
	will-change: transform;
	z-index: 10;
}

.thumbnail-mouseover-inner {
	max-height: 85vh;
	max-width: 85vh;
	border: 5px solid;
	border-color: white;
	filter: drop-shadow(0 0 0.75rem grey);
}

.img-thumbnail {
	background-color: inherit;
	border: 1px;
	border-color: white;
}

img.img-thumbnail.sm {
	max-height: 100%;
	max-width: 100%;
}

	img.img-thumbnail.sm.error {
		height: 100px;
		width: 100px;
	}

td > img.img-thumbnail.sm {
	height: 40px;
	width: 70px;
}

	td > img.img-thumbnail.sm.error {
		height: 40px;
		width: 70px;
	}

/* Intended for buttons that appear alongside labels in forms, above the correponding form field. */
.label-button {
	font-size: 1.5rem;
}

.tube-stop {
	font-size: 1.5rem;
	color: var(--text-color);
}

	.tube-stop.current {
		color: var(--tube-stop-color);
	}

	.tube-stop.none {
		color: var(--tube-stop-color-alt);
	}

	.tube-stop i {
		color: revert;
	}

	.tube-stop.success {
		color: var(--tube-stop-color);
	}

	.tube-stop.current {
		color: var(--tube-stop-color);
	}

	.tube-stop.error {
		color: var(--error);
	}

	.tube-stop.warning {
		color: var(--warning-orange);
	}

.tube-stop-link {
	color: var(--text-color);
}

	.tube-stop-link.current {
		color: var(--tube-stop-color);
	}

		.tube-stop-link.current > .nav-item {
			font-weight: bold;
		}

@media (max-width:576px) {
	.tube-stop-link > .nav-item {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
}

@media (min-width:576px) {
	.tube-stop-link > .nav-item {
		white-space: nowrap;
	}
}

.tube-stop-connector {
	border-color: var(--tube-stop-color-alt);
	color: var(--tube-stop-color-alt);
	border-width: medium;
}

	.tube-stop-connector.active {
		border-color: var(--tube-stop-color);
		color: var(--tube-stop-color);
	}

/*	.tube-stop-connector.error {
		border-color: var(--error);
	}*/

td.start-related-group {
	background-color: var(--background-color);
	border-left: 2px solid transparent;
	background-clip: padding-box;
}

td.middle-related-group {
	background-color: var(--background-color);
	background-clip: padding-box;
}

td.end-related-group {
	background-color: var(--background-color);
	border-right: 2px solid transparent;
	background-clip: padding-box;
}

td.start-related-group.red {
	background-color: var(--error-light-red);
}

td.middle-related-group.red {
	background-color: var(--error-light-red);
}

td.end-related-group.red {
	background-color: var(--error-light-red);
}


.item-due-dates-control {
	height: calc(1.5em + 1rem + 3.5px);
}

.alert.alert-info {
	background: #D1E1F9;
	border: 1px solid #1B6BE0;
	color: var(--text-color);
}

.alert.alert-warning {
	background: #FFECD5;
	border: 1px solid #FF9E2C;
	color: var(--text-color);
}

.alert.alert-danger {
	background: #FCE5E5;
	border: 1px solid #E30000;
	color: var(--text-color);
}

.alert.alert-success {
	background: #D6EEDA;
	border: 1px solid #34AA44;
	color: var(--text-color);
}

.kt-aside__brand-logo a {
	background-color: var(--header-pill-background-color);
}

input, .form-control, .form-control:focus, .custom-select {
	background-color: var(--field-background-color);
	color: var(--text-color);
}

.form-control-sm, .custom-select-sm {
	font-size: inherit;
}

/*
	batch action cell-xxx styles brought in from site.css to be after the above background-color
	for	form controls. That way it has higher specificty
*/
.form-control[readonly].cell-changed,
.form-control:disabled.cell-changed,
.cell-changed,
.cell-changed .form-control,
.cell-changed .form-control input {
	background-color: var(--pale-blue);
}

.form-control[readonly].cell-warning,
.form-control:disabled.cell-warning,
.cell-warning,
.cell-warning .form-control,
.cell-warning .form-control input {
	background-color: var(--warning-light-orange);
}

.form-control[readonly].cell-danger,
.form-control:disabled.cell-danger,
.cell-danger,
.cell-danger .form-control,
.cell-danger .form-control input {
	background-color: var(--error-light-red);
}

.form-control[readonly].cell-success,
.form-control:disabled.cell-success,
.cell-success,
.cell-success .form-control,
.cell-success .form-control input {
	background-color: var(--success-light-green);
}

.job-status-priority {
	color: var(--JobStatus-priority) !important;
}

.job-status-background-priority.status-icn {
	background-color: var(--Status-background-icn) !important;
}

.job-status-integration {
	color: var(--JobStatus-integration) !important;
}

.job-status-background-integration.status-icn {
	background-color: var(--Status-background-icn) !important;
}

.job-status-taskscomplete,
/* this next section is needed otherwise blazor's class overrides it. */
.job-status-taskscomplete > .status-text {
	color: var(--JobStatus-tasks-complete) !important;
}

.job-status-background-taskscomplete.status-icn {
	background-color: var(--Status-background-icn) !important;
}

.item-status-dormant
.item-status-dormant > .status-text,
.job-status-dormant,
/* this next section is needed otherwise blazor's class overrides it. */
.job-status-dormant > .status-text {
	color: var(--JobStatus-dormant) !important;
	border-color: var(--JobStatus-dormant) !important;
}

	.item-status-dormant > .status-icn,
	.item-status-dormant > div > .dropdown-toggle,
	.job-status-dormant > .status-icn,
	.job-status-dormant > div > .dropdown-toggle {
		color: var(--JobStatus-dormant) !important;
	}

.icon-error {
	color: var(--error);
}

.icon-success {
	color: var(--success-green-icn);
}

.job-status-selectlist.btn:disabled {
	opacity: 1;
}

.job-status-background-dormant.status-icn {
	background-color: var(--Status-background-icn) !important;
}

.job-status-none,
/* this next section is needed otherwise blazor's class overrides it. */
.job-status-none > .status-text {
	color: var(--JobStatus-none) !important;
	border-color: var(--JobStatus-none) !important;
}

	.job-status-none > .status-icn,
	.job-status-none > div > .dropdown-toggle {
		color: var(--JobStatus-none) !important;
	}

.job-status-background-none.status-icn {
	background-color: var(--Status-background-icn) !important;
}

.job-status-closed-pending-pon,
/* this next section is needed otherwise blazor's class overrides it. */
.job-status-closed-pending-pon > .status-text {
	color: var(--JobStatus-closed-pending-pon) !important;
	border-color: var(--JobStatus-closed-pending-pon) !important;
}

	.job-status-closed-pending-pon > .status-icn,
	.job-status-closed-pending-pon > div > .dropdown-toggle {
		color: var(--JobStatus-closed-pending-pon) !important;
	}

button.job-status-closed-pending-pon {
	border-color: var(--JobStatus-closed-pending-pon);
}

.job-status-background-closed-pending-pon.status-icn {
	background-color: var(--Status-background-icn) !important;
}

.job-status-on-approval,
/* this next section is needed otherwise blazor's class overrides it. */
.job-status-on-approval > .status-text {
	color: var(--JobStatus-on-approval) !important;
	border-color: var(--JobStatus-on-approval) !important;
}

	.job-status-on-approval > .status-icn,
	.job-status-on-approval > div > .dropdown-toggle {
		color: var(--JobStatus-on-approval) !important;
	}

.job-status-background-on-approval.status-icn {
	background-color: var(--Task-background-on-approval) !important;
}

.item-status-on-hold,
.item-status-on-hold > .status-text,
.job-status-on-hold,
/* this next section is needed otherwise blazor's class overrides it. */
.job-status-on-hold > .status-text {
	color: var(--JobStatus-on-hold) !important;
	border-color: var(--JobStatus-on-hold) !important;
}

	.item-status-on-hold > .status-icn,
	.item-status-on-hold > div > .dropdown-toggle,
	.job-status-on-hold > .status-icn,
	.job-status-on-hold > div > .dropdown-toggle {
		color: var(--JobStatus-on-hold) !important;
	}

.job-status-background-on-hold.status-icn,
.job-status-background-on-hold.btn {
	background-color: var(--Task-background-on-hold) !important;
}

/* this next section is needed otherwise blazor's class overrides it. */
.item-status-live,
.item-status-live > .status-text,
.job-status-live > .status-text {
	color: var(--JobStatus-live) !important;
	border-color: var(--JobStatus-live) !important;
}

	.item-status-live > .status-icn,
	.item-status-live > div > .dropdown-toggle,
	.job-status-live > .status-icn,
	.job-status-live > div > .dropdown-toggle {
		color: var(--JobStatus-live) !important;
	}

.job-status-finished,
.job-status-finished > .status-text,
.job-status-complete,
/* this next section is needed otherwise blazor's class overrides it. */
.job-status-complete > .status-text,
.item-status-complete,
.item-status-complete > .status-text {
	color: var(--JobStatus-complete);
	border-color: var(--JobStatus-complete);
}

	.job-status-finished > .status-icn,
	.job-status-finished > div > .dropdown-toggle,
	.job-status-complete > .status-icn,
	.job-status-complete > div > .dropdown-toggle,
	.item-status-complete > .status-icn {
		color: var(--JobStatus-complete);
	}

.btn:disabled > div > .job-status-complete {
	color: var(--status-disabled-text);
}

.job-status-background-complete.status-icn {
	background-color: var(--Status-background-icn) !important;
}

.job-status-readyinvoice,
/* this next section is needed otherwise blazor's class overrides it. */
.job-status-readyinvoice > .status-text {
	color: var(--JobStatus-ready-invoice) !important;
	border-color: var(--JobStatus-ready-invoice) !important;
}

	.job-status-readyinvoice > .status-icn,
	.job-status-readyinvoice > div > .dropdown-toggle {
		color: var(--JobStatus-ready-invoice) !important;
	}

.job-status-background-readyinvoice.status-icn {
	background-color: var(--Status-background) !important;
}

.job-status-invoiced,
/* this next section is needed otherwise blazor's class overrides it. */
.job-status-invoiced > .status-text {
	color: var(--JobStatus-invoiced) !important;
	border-color: var(--JobStatus-invoiced) !important;
}

	.job-status-invoiced > .status-icn,
	.job-status-invoiced > div > .dropdown-toggle {
		color: var(--JobStatus-invoiced) !important;
	}

.job-status-background-invoiced {
	background-color: var(--Status-background-icn) !important;
}

.job-status-quotation,
/* this next section is needed otherwise blazor's class overrides it. */
.job-status-quotation > .status-text {
	color: var(--JobStatus-quotation) !important;
	border-color: var(--JobStatus-quotation) !important;
}

	.job-status-quotation > .status-icn,
	.job-status-quotation > div > .dropdown-toggle {
		color: var(--JobStatus-quotation) !important;
	}

.job-status-background-quotation.status-icn {
	background-color: var(--Status-background-icn) !important;
}

.task-status-not-started,
/* this next section is needed otherwise blazor's class overrides it. */
.task-status-not-started > .status-text {
	color: var(--Task-not-started) !important;
	border-color: var(--Task-not-started) !important;
}

	.task-status-not-started.btn {
		background-color: var(--Task-background-not-started) !important;
	}

		.task-status-not-started.btn:disabled {
			opacity: 1.0 !important;
		}

.btn:disabled > div > .task-status-not-started,
/* this next section is needed otherwise blazor's class overrides it. */
.btn:disabled > div > .task-status-not-started > .status-text {
	color: var(--status-disabled-text);
}

.task-status-not-started > .status-icn,
.task-status-not-started > div > .dropdown-toggle {
	color: var(--Task-not-started);
}

.task-status-background-not-started.status-icn {
	background-color: var(--Task-background-not-started) !important;
}

.task-status-in-progress,
.task-status-inprogress,
/* this next section is needed otherwise blazor's class overrides it. */
.task-status-in-progress > .status-text {
	color: var(--Task-in-progress) !important;
	border-color: var(--Task-in-progress) !important;
}

	.task-status-in-progress > .status-icn,
	.task-status-in-progress > div > .dropdown-toggle {
		color: var(--Task-in-progress) !important;
	}

	.task-status-in-progress.btn {
		background-color: var(--Task-background-in-progress) !important;
	}

		.task-status-in-progress.btn:disabled {
			opacity: 1.0 !important;
		}

.task-status-background-in-progress.status-icn {
	background-color: var(--Task-background-in-progress) !important;
}

.task-status-complete,
/* this next section is needed otherwise blazor's class overrides it. */
.task-status-complete > .status-text {
	color: var(--Task-complete) !important;
	border-color: var(--Task-complete) !important;
}

	.task-status-complete > .status-icn,
	.task-status-complete > div > .dropdown-toggle {
		color: var(--Task-complete) !important;
	}

	.task-status-complete.btn {
		background-color: var(--Task-background-complete) !important;
	}

		.task-status-complete.btn:disabled {
			opacity: 1.0 !important;
		}

.task-status-background-complete.status-icn {
	background-color: var(--Task-background-complete) !important;
}

.task-status-on-approval,
.task-status-onapproval,
/* this next section is needed otherwise blazor's class overrides it. */
.task-status-on-approval > .status-text {
	color: var(--Task-on-approval) !important;
	border-color: var(--Task-on-approval) !important;
}

	.task-status-on-approval > .status-icn,
	.task-status-on-approval > div > .dropdown-toggle {
		color: var(--Task-on-approval) !important;
	}

	.task-status-on-approval.btn {
		background-color: var(--Task-background-on-approval) !important;
	}

		.task-status-on-approval.btn:disabled {
			opacity: 1.0 !important;
		}

.task-status-background-on-approval.status-icn {
	background-color: var(--Task-background-on-approval) !important;
}

.task-status-abandoned,
/* this next section is needed otherwise blazor's class overrides it. */
.task-status-abandoned > .status-text {
	color: var(--Task-abandoned) !important;
	border-color: var(--Task-abandoned) !important;
}

	.task-status-abandoned > .status-icn,
	.task-status-abandoned > div > .dropdown-toggle {
		color: var(--Task-abandoned) !important;
	}

	.task-status-abandoned.btn {
		background-color: var(--Task-background-abandoned) !important;
	}

		.task-status-abandoned.btn:disabled {
			opacity: 1.0 !important;
		}

.task-status-background-abandoned.status-icn {
	background-color: var(--Task-background-abandoned) !important;
}

.task-status-paused,
/* this next section is needed otherwise blazor's class overrides it. */
.task-status-paused > .status-text {
	color: var(--Task-paused) !important;
	border-color: var(--Task-paused) !important;
}

	.task-status-paused > .status-icn,
	.task-status-paused > div > .dropdown-toggle {
		color: var(--Task-paused) !important;
	}

	.task-status-paused.btn {
		background-color: var(--Task-background-paused) !important;
	}

		.task-status-paused.btn:disabled {
			opacity: 1.0 !important;
		}

.task-status-background-paused.status-icn {
	background-color: var(--Task-background-paused) !important;
}

.job-status-approved-live,
.job-status-approved-live > .status-text,
.job-status-approved-finished,
.job-status-approved-finished > .status-text,
.task-status-approved,
/* this next section is needed otherwise blazor's class overrides it. */
.task-status-approved > .status-text {
	color: var(--Task-approved) !important;
	border-color: var(--Task-approved) !important;
}

	.job-status-approved-live > .status-icn,
	.job-status-approved-finished > .status-icn,
	.task-status-approved > .status-icn,
	.job-status-approved-live > div > .dropdown-toggle,
	.job-status-approved-finished > div > .dropdown-toggle,
	.task-status-approved > div > .dropdown-toggle {
		color: var(--Task-approved) !important;
	}

	.task-status-approved.btn {
		background-color: var(--Task-background-approved) !important;
	}

		.task-status-approved.btn:disabled {
			opacity: 1.0 !important;
		}

.job-status-background-approved-live.status-icn,
.job-status-background-approved-finished.status-icn,
.job-status-background-approved.status-icn,
.task-status-background-approved.status-icn {
	background-color: var(--Task-background-approved) !important;
}

.job-status-amends-required,
.job-status-amends-required > .status-text,
.task-status-amends-required,
.task-status-amendsrequired,
/* this next section is needed otherwise blazor's class overrides it. */
.task-status-amends-required > .status-text {
	color: var(--Task-amends-required) !important;
	border-color: var(--Task-amends-required) !important;
}

	.job-status-amends-required > .status-icn,
	.task-status-amends-required > .status-icn,
	.job-status-amends-required > div > .dropdown-toggle,
	.task-status-amends-required > div > .dropdown-toggle {
		color: var(--Task-amends-required) !important;
	}

	.task-status-amends-required.btn {
		background-color: var(--Task-background-amends-required) !important;
	}

		.task-status-amends-required.btn:disabled {
			opacity: 1.0 !important;
		}

.job-status-background-amends-required.status-icn,
.task-status-background-amends-required.status-icn {
	background-color: var(--Task-background-amends-required) !important;
}

.despatchitem-section-included,
/* this next section is needed otherwise blazor's class overrides it. */
.despatchitem-section-included > .status-text {
	color: var(--JobStatus-complete) !important;
	border-color: var(--JobStatus-complete) !important;
}

	.despatchitem-section-included > .status-icn {
		color: var(--JobStatus-complete) !important;
	}

.despatchitem-section-available,
/* this next section is needed otherwise blazor's class overrides it. */
.despatchitem-section-available > .status-text {
	color: var(--JobStatus-on-approval) !important;
	border-color: var(--JobStatus-on-approval) !important;
}

	.despatchitem-section-available > .status-icn,
	.despatchitem-section-available > div > .dropdown-toggle {
		color: var(--JobStatus-on-approval) !important;
	}

.despatchitem-section-ignored,
/* this next section is needed otherwise blazor's class overrides it. */
.despatchitem-section-ignored > .status-text {
	color: var(--JobStatus-on-hold) !important;
	border-color: var(--JobStatus-on-hold) !important;
}

	.despatchitem-section-ignored > .status-icn
	.despatchitem-section-ignored > div > .dropdown-toggle {
		color: var(--JobStatus-on-hold) !important;
	}

.despatchitem-section-remove,
/* this next section is needed otherwise blazor's class overrides it. */
.despatchitem-section-remove > .status-text {
	color: var(--JobStatus-closed-pending-pon) !important;
	border-color: var(--JobStatus-closed-pending-pon) !important;
}

	.despatchitem-section-remove > .status-icn,
	.despatchitem-section-remove > div > .dropdown-toggle {
		color: var(--JobStatus-closed-pending-pon) !important;
	}

/* this next section is needed otherwise blazor's class overrides it. */
.complaint-status-low-priority,
.complaint-status-low-priority > .status-text {
	color: var(--ComplaintStatus-Low) !important;
	border-color: var(--ComplaintStatus-Low) !important;
}

	.complaint-status-low-priority > .status-icn,
	.complaint-status-low-priority > div > .dropdown-toggle {
		color: var(--ComplaintStatus-Low) !important;
	}


/* this next section is needed otherwise blazor's class overrides it. */
.complaint-status-medium-priority,
.complaint-status-medium-priority > .status-text {
	color: var(--ComplaintStatus-Medium) !important;
	border-color: var(--ComplaintStatus-Medium) !important;
}

	.complaint-status-medium-priority > .status-icn,
	.complaint-status-medium-priority > div > .dropdown-toggle {
		color: var(--ComplaintStatus-Medium) !important;
	}

/* this next section is needed otherwise blazor's class overrides it. */
.complaint-status-high-priority,
.complaint-status-high-priority > .status-text {
	color: var(--ComplaintStatus-High) !important;
	border-color: var(--ComplaintStatus-High) !important;
}

	.complaint-status-high-priority > .status-icn,
	.complaint-status-high-priority > div > .dropdown-toggle {
		color: var(--ComplaintStatus-High) !important;
	}

/* this next section is needed otherwise blazor's class overrides it. */
.complaint-status-closed,
.complaint-status-closed > .status-text {
	color: var(--ComplaintStatus-Closed) !important;
	border-color: var(--ComplaintStatus-Closed) !important;
}

	.complaint-status-closed > .status-icn,
	.complaint-status-closed > div > .dropdown-toggle {
		color: var(--ComplaintStatus-Closed) !important;
	}

/* this next section is needed otherwise blazor's class overrides it. */
.car-status-customer-qa,
.car-status-customer-qa > .status-text {
	color: var(--CarStatus-customer-qa) !important;
	background-color: var(--CarStatus-base-background);
	border-color: var(--CarStatus-customer-qa) !important;
}

	.car-status-customer-qa > .status-icn,
	.car-status-customer-qa > div > .dropdown-toggle {
		color: var(--CarStatus-customer-qa) !important;
	}

.car-status-customer-qi,
.car-status-customer-qi > .status-text {
	color: var(--CarStatus-customer-qi) !important;
	background-color: var(--CarStatus-base-background);
	border-color: var(--CarStatus-customer-qi) !important;
}

	.car-status-customer-qi > .status-icn,
	.car-status-customer-qi > div > .dropdown-toggle {
		color: var(--CarStatus-customer-qi) !important;
	}

.car-status-combined-qa,
.car-status-combined-qa > .status-text {
	color: var(--CarStatus-combined-qa) !important;
	background-color: var(--CarStatus-base-background);
	border-color: var(--CarStatus-combined-qa) !important;
}

	.car-status-combined-qa > .status-icn,
	.car-status-combined-qa > div > .dropdown-toggle {
		color: var(--CarStatus-combined-qa) !important;
	}

.car-status-sgs-qa,
.car-status-sgs-qa > .status-text {
	color: var(--CarStatus-sgs-qa) !important;
	background-color: var(--CarStatus-sgs-qa-background) !important;
	border-color: var(--CarStatus-sgs-qa) !important;
}

	.car-status-sgs-qa > .status-icn,
	.car-status-sgs-qa > div > .dropdown-toggle {
		color: var(--CarStatus-sgs-qa) !important;
	}

.car-status-sgs-qi,
.car-status-sgs-qi > .status-text {
	color: var(--CarStatus-sgs-qi) !important;
	background-color: var(--CarStatus-sgs-qi-background) !important;
	border-color: var(--CarStatus-sgs-qi) !important;
}

	.car-status-sgs-qi > .status-icn,
	.car-status-sgs-qi > div > .dropdown-toggle {
		color: var(--CarStatus-sgs-qi) !important;
	}

.car-status-sgs-psqi,
.car-status-sgs-psqi > .status-text {
	color: var(--CarStatus-sgs-psqi) !important;
	background-color: var(--CarStatus-sgs-psqi-background);
	border-color: var(--CarStatus-sgs-psqi) !important;
}

	.car-status-sgs-psqi > .status-icn,
	.car-status-sgs-psqi > div > .dropdown-toggle {
		color: var(--CarStatus-sgs-psqi) !important;
	}

.car-status-sgs-sqi,
.car-status-sgs-sqi > .status-text {
	color: var(--CarStatus-sgs-sqi) !important;
	background-color: var(--CarStatus-base-background);
	border-color: var(--CarStatus-sgs-sqi) !important;
}

	.car-status-sgs-sqi > .status-icn,
	.car-status-sgs-sqi > div > .dropdown-toggle {
		color: var(--CarStatus-sgs-sqi) !important;
	}

.car-status-complete,
.car-status-complete > .status-text {
	color: var(--CarStatus-complete) !important;
	background-color: var(--CarStatus-complete-background) !important;
	border-color: var(--CarStatus-complete) !important;
}

	.car-status-complete > .status-icn,
	.car-status-complete > div > .dropdown-toggle {
		color: var(--CarStatus-complete) !important;
	}

.card {
	background-color: var(--module-background-color);
}

.add_item_task_details_modal, .add_item_details_modal, .mark_as_sent_modal > div > label {
	color: var(--accent);
}

.dropdown-menu {
	color: var(--text-color);
}

.form-control:disabled, .form-control[readonly], .custom-select:disabled {
	background-color: var(--field-disabled-color);
}


.modal-content {
	background-color: var(--module-background-color);
}

.modal .modal-content .modal-header .modal-title {
	color: var(--text-color);
}

.dropdown-toggle {
	color: var(--text-color);
}

.btn-primary.dropdown-toggle {
	color: var(--text-color-alt);
}

.text-primary {
	color: var(--accent-text);
}

.text-secondary {
	color: var(--text-color-alt)
}

.audit-highlight-background {
	background-color: var(--audit-value-searched-highlight-color);
	color: black;
}

.audit-green-background {
	background-color: var(--audit-value-green-highlight-color);
	color: black;
}

.pale-green-background {
	background-color: var(--green-background);
}

.pale-grey-blue-background {
	background-color: var(--blue-background);
}

.audit-red-background {
	background-color: var(--audit-value-red-highlight-color);
	color: black;
}

.pale-red-background {
	background-color: var(--red-background);
}

.form-control.is-invalid option {
	background-color: var(--background-color);
}

.input-group-text {
	background-color: var(--background-color);
	color: var(--text-color);
}

.primary-icon {
	color: var(--background-color);
	background-color: var(--icon-color);
}

	.primary-icon.selected {
		background-color: var(--warning-orange);
	}

/* Override the StyledDatePicker control - START
	(don't want blue highlights etc) */
.daterangepicker td.active, .daterangepicker td.active:hover {
	background-color: var(--accent-hover);
	border-color: transparent;
	color: var(--text-color-alt);
}

.daterangepicker .drp-calendar td.today, .daterangepicker .drp-calendar td.today.active {
	background: var(--accent-disabled) !important;
	color: var(--text-color-alt) !important;
}

.daterangepicker .drp-calendar td.active {
	background-color: var(--accent) !important;
	color: white !important;
}
/* Override the StyledDatePicker control - END */

/*
START - Bootstrap 5 - Polyfill until upgrade
*/
.table thead th {
	font-weight: bold;
	border-bottom: solid 1px var(--border-color);
	padding-top: 0.5rem;
	padding-bottom: 0.5rem;
	/*	z-index: 1;*/ /* Note adding this causes menu options to be unavailable, care should be taken to ensure all areas of the system that use tables do not effect other locations. */
}

.border-1 {
	border-width: 1px !important;
}

.border-2 {
	border-width: 2px !important;
}

.border-3 {
	border-width: 3px !important;
}

.border-4 {
	border-width: 4px !important;
}

.border-5 {
	border-width: 5px !important;
}

.border-transparent {
	border-color: transparent !important;
}
/*
END - Bootstrap 5 - Polyfill until upgrade
*/

select option[selected] {
	background-color: var(--accent-disabled);
}

.text-color-border {
	border-color: var(--text-color);
}

.link-text-reset {
	font-size: 13px;
	font-weight: normal;
	line-height: 1.57;
	letter-spacing: normal;
	vertical-align: middle;
}

.profile-information {
	box-shadow: 1px 1px #e8e8ea;
	border-radius: 4px;
	background-color: var(--background-color);
}

	.profile-information .profile-status-online {
		color: var(--profile-status-online);
	}

.font-link-icon {
	font-size: 1.3rem;
}


body::-webkit-scrollbar, div::-webkit-scrollbar, table::-webkit-scrollbar, html::-webkit-scrollbar, ul::-webkit-scrollbar {
	width: 1rem; /* width of the entire scrollbar */
	height: 1rem;
}


body::-webkit-scrollbar-track, html::-webkit-scrollbar-track, ul::-webkit-scrollbar-track {
	background: var(--background-color); /* color of the tracking area*/
}

div::-webkit-scrollbar-track, table::-webkit-scrollbar-track {
	background: var(--module-background-color); /* color of the tracking area*/
}

body::-webkit-scrollbar-thumb, div::-webkit-scrollbar-thumb, table::-webkit-scrollbar-thumb, html::-webkit-scrollbar-thumb, ul::-webkit-scrollbar-thumb {
	background-color: var(--accent); /* color of the scroll thumb */
	border-radius: 20px; /* roundness of the scroll thumb */
	border: 3px solid var(--background-color); /* creates padding around scroll thumb */
}

	body::-webkit-scrollbar-thumb:hover, div::-webkit-scrollbar-thumb:hover, table::-webkit-scrollbar-thumb:hover, html::-webkit-scrollbar-thumb:hover, ul::-webkit-scrollbar-thumb:hover {
		border: 2px solid var(--module-background-color); /* creates padding around scroll thumb */
	}


body.modal-open {
	/* Note important is required, needed to override modal css that restores the overflow*/
	overflow: hidden !important;
}

.scrollToLink {
	background: var(--accent);
	color: var(--text-color-alt);
	border-radius: 20px;
}

	.scrollToLink:hover {
		color: var(--text-color-alt);
	}

.disable-pointer {
	pointer-events: none;
}

.enable-pointer {
	pointer-events: all;
}

.col-resizable:hover {
	background-color: var(--card-header-color);
	overflow: visible;
	text-overflow: clip;
	white-space: normal;
}

.col-resizable {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

	.col-resizable > .resizableicons {
		display: none;
	}

	.col-resizable:hover > .resizableicons {
		pointer-events: none;
		display: inline-block;
		position: absolute;
		right: 8px;
		top: 7px;
		width: 0px;
		z-index: 11;
	}

		.col-resizable:hover > .resizableicons > .material-icons {
			border: 2px solid white;
			color: white;
			background-color: var(--accent);
			border-radius: 25px;
			font-size: small;
		}

.footer {
	position: fixed;
	bottom: 0;
	left: 0;
}

.font-boldest {
	font-weight: bold;
}

.tube-stop-left-connector {
	padding-right: 0;
	margin-right: 15px;
	margin-left: -15px;
}

.tube-stop-parent {
	width: 0px;
	overflow: visible;
}

.tube-stop-circle {
	min-width: 25px;
	position: relative;
	left: -12px;
}

.tube-stop-right-connector {
	padding-left: 0;
	margin-left: 15px;
	margin-right: -15px;
}

.hover-above-icon-message:after {
	content: "";
	position: absolute;
	width: 0;
	height: 0;
	left: 44%;
	top: 35px;
	border: 10px solid transparent;
	border-bottom: 0; /* IE8 Fallback */
	border-top: 16px solid var(--warning-orange);
	z-index: 2;
}

.hover-above-icon-message-parent {
	align-content: center;
	position: absolute;
	top: 25.5rem;
}

.profile-icon {
	background-color: var(--module-background-color);
	color: var(--header-background-colour);
	border-radius: 50%;
	width: 24px;
	height: 24px;
}

.thumbnail {
	background: var(--field-disabled-color);
}

.integrated-orders-search-textedit {
	height: 2.8125rem;
}

.bottom-divider {
	border-bottom-style: solid;
	border-bottom-color: var(--seperator-color);
	border-bottom-width: 1px;
}

.background-color {
	background-color: var(--background-color);
}

.fit-content {
	width: fit-content;
}

textarea.instructions {
	height: 6rem;
	width: 100%;
}

.white-space-pre-line {
	white-space: pre-line;
}

.header-icon {
	padding: 0;
	border: solid 0px var(--border-color);
	border-radius: 100%;
	color: var(--header-background-colour);
	background-color: var(--module-background-color);
	width: 24px; /* Want this to be a fixed pixel size */
	height: 24px; /* Want this to be a fixed pixel size */
}

.rotate-90 {
	transform: rotate(90deg);
}

.table-sm > tbody > tr > td {
	padding-top: 1px;
	padding-bottom: 1px;
}

	.table-sm > tbody > tr > td > details {
		margin-top: 0.5rem;
		margin-bottom: 0.5rem;
	}



.tooltip {
	pointer-events: none;
}

	.tooltip > .arrow::before {
		border-top-color: var(--accent)
	}

.tooltip-inner.tooltip-error {
	background-color: var(--error);
	color: var(--text-color-alt);
}

.tooltip-error.arrow::before {
	border-top-color: var(--error);
}

.tooltip-general {
	background-color: var(--accent);
	color: var(--text-color-alt);
	max-width: 350px;
}

	.tooltip-general.arrow::before {
		border-top-color: var(--accent);
	}

.tooltip-inner.tooltip-success {
	background-color: var(--success-green);
	color: var(--text-color-alt);
}

.tooltip-success.arrow::before {
	border-top-color: var(--success-green);
}

.tooltip-warning-icon {
	color: var(--warning-orange);
}

.tooltip-error-icon {
	color: var(--error);
}

.tooltip-inner.tooltip-warning {
	background-color: var(--warning-orange);
	color: var(--text-color-alt);
}

.tooltip-warning.arrow::before {
	border-top-color: var(--warning-orange);
	border-bottom-color: var(--warning-orange);
}

.card-header:first-child {
	border-radius: 0.2rem;
}

.stage-add {
	border-width: 0px;
}

.technical-checklist-parent > form:nth-of-type(odd) > div {
	background-color: var(--table-stripe-odd-row);
	border-bottom: 1px solid var(--grey-six);
}

.technical-checklist-parent > form:nth-of-type(even) > div {
	background-color: var(--table-stripe-even-row);
	border-bottom: 1px solid var(--grey-six);
}

.technical-checklist-parent > form > div > div {
	padding-bottom: 0.2rem;
	padding-top: 0.2rem;
}

.checklist-table {
	font-weight: bold;
	border-bottom: solid 1px var(--border-color);
	padding-top: 0.5rem;
	padding-bottom: 0.5rem;
}

.input-group > .form-control:not(:last-child), .asColorPicker-wrap > .form-control:not(:last-child), .input-group > .asColorPicker-input:not(:last-child), .asColorPicker-wrap > .asColorPicker-input:not(:last-child), .dataTables_wrapper .input-group > select:not(:last-child), .dataTables_wrapper .asColorPicker-wrap > select:not(:last-child), .jsgrid .jsgrid-table .jsgrid-filter-row .input-group > input:not(:last-child)[type=text], .jsgrid .jsgrid-table .jsgrid-filter-row .asColorPicker-wrap > input:not(:last-child)[type=text],
.jsgrid .jsgrid-table .jsgrid-filter-row .input-group > select:not(:last-child),
.jsgrid .jsgrid-table .jsgrid-filter-row .asColorPicker-wrap > select:not(:last-child), .jsgrid .jsgrid-table .jsgrid-filter-row .input-group > input:not(:last-child)[type=number], .jsgrid .jsgrid-table .jsgrid-filter-row .asColorPicker-wrap > input:not(:last-child)[type=number], .select2-container--default .input-group > .select2-selection--single:not(:last-child), .select2-container--default .asColorPicker-wrap > .select2-selection--single:not(:last-child), .select2-container--default .select2-selection--single .input-group > .select2-search__field:not(:last-child), .select2-container--default .select2-selection--single .asColorPicker-wrap > .select2-search__field:not(:last-child), .input-group > .typeahead:not(:last-child), .asColorPicker-wrap > .typeahead:not(:last-child),
.input-group > .tt-query:not(:last-child),
.asColorPicker-wrap > .tt-query:not(:last-child),
.input-group > .tt-hint:not(:last-child),
.asColorPicker-wrap > .tt-hint:not(:last-child),
.input-group > .custom-select:not(:last-child),
.asColorPicker-wrap > .custom-select:not(:last-child) > .stage-select {
	border-top-right-radius: 0.25rem;
	border-bottom-right-radius: 0.25rem;
}

.job-status-selectlist[disabled="disabled"] > div > span[class~="dropdown-toggle"] {
	display: none;
}

.alert-background {
	background-color: var(--error-light-red);
}

.error-text {
	color: var(--error);
}

/* !important needed as dark themes and tooltips need overriding to show correct text colour (Bug 156327)*/
.message-region-text {
	color: var(--message-text) !important;
}

.viewport-width-90 {
	max-width: 90vw;
}

.viewport-width-93 {
	max-width: 93vw;
}

.error-split-container {
	background-color: var(--highlighted-container);
}

.address-book-sticky {
	position: sticky;
	position: -webkit-sticky;
	top: 3rem;
	background-color: var(--module-background-color);
	z-index: 1;
}

.batch-upversion-table-header {
	font-weight: bold;
	border-bottom: solid 1px var(--border-color);
	padding-top: 0.5rem;
	padding-bottom: 0.5rem;
	background-color: var(--table-header-background-colour);
}

.batch-upversion-table-row-even {
	background-color: var(--table-stripe-even-row);
	border-bottom: 1px solid var(--grey-six);
}

.batch-upversion-table-row-odd {
	background-color: var(--table-stripe-odd-row);
	border-bottom: 1px solid var(--grey-six);
}

.expandable-section-header {
	width: 2rem;
}

.t-minus-1 {
	position: relative;
}

table div .t-minus-1 {
	top: -1px;
	position: relative;
}

@-moz-document url-prefix() {
	.t-minus-1 {
		top: 1px;
		position: relative;
	}
}

.container.print {
	font-family: Arial, Helvetica, sans-serif;
}

.print-normal-text,
tr.print-normal-text > th,
tr.print-normal-text > td {
	color: black;
	font-size: 10px;
}

.print-text-colour {
	color: black;
}

.print-border-color,
table.print-border-color > tr {
	border-color: black !important;
	border-top-color: black !important;
	border-bottom-color: black !important;
}