/* Theme variables */

html, :root {
	/* Base colours */
	/* Gray color palette */
	--gray-50: rgb(255, 255, 255);
	--gray-100: rgb(248, 250, 252);
	--gray-200: rgb(241, 245, 249);
	--gray-300: rgb(231, 236, 244);
	--gray-400: rgb(222, 227, 232);
	--gray-500: rgb(186, 198, 214);
	--gray-600: rgb(98, 120, 149);
	--gray-700: rgb(94, 91, 119);
	--gray-800: rgb(39, 38, 51);
	--gray-900: rgb(33, 37, 41);
	--gray-950: rgb(27, 29, 35);

	/* Dark gray color palette */
	--dark-gray-50: rgb(255, 255, 255);
	--dark-gray-100: rgb(248, 250, 252);
	--dark-gray-200: rgb(201, 209, 217);
	--dark-gray-300: rgb(134, 149, 168);
	--dark-gray-400: rgb(117, 131, 152);
	--dark-gray-500: rgb(71, 79, 92);
	--dark-gray-600: rgb(54, 61, 73);
	--dark-gray-700: rgb(36, 41, 51);
	--dark-gray-750: rgb(43, 51, 60);
	--dark-gray-800: rgb(30, 32, 41);
	--dark-gray-900: rgb(22, 25, 33);
	--dark-gray-950: rgb(15, 17, 23);

	--plain-rgb: 255,255,255;

	--primary-base: rgb(91, 200, 217);
	--primary-light: rgb(124, 221, 236);
	--primary-dark: rgb(36, 118, 131);
	--primary-rgb: 91,200,217;
	--secondary-base: rgb(108, 117, 125);
	--secondary-rgb: 108,117,125;

	--success-rgb: 40, 167, 69;
	--success-secure: rgb(40, 167, 69);
	--success-text: rgb(12, 66, 25);
	--success-alert-box: rgba(var(--success-rgb), 0.2);
	--success-button: rgba(var(--success-rgb), 0.2);
	--success-button-hover: rgba(var(--success-rgb), 0.3);
	--warning-rgb: 251, 144, 18;
	--warning-secure: rgb(251, 144, 18);
	--warning-text: rgb(201, 120, 0);
	--warning-alert-box: rgba(var(--warning-rgb), 0.2);
	--warning-button: rgba(var(--warning-rgb), 0.2);
	--warning-button-hover: rgba(var(--warning-rgb), 0.3);
	--danger-rgb: 220, 53, 69;
	--danger-secure: rgb(220, 53, 69);
	--danger-secure-hover: rgb(200, 35, 51);
	--danger-text: rgb(85, 0, 0);
	--danger-alert-box: rgba(var(--danger-rgb), 0.2);
	--danger-button: rgba(var(--danger-rgb), 0.2);
	--danger-button-hover: rgba(var(--danger-rgb), 0.3);
	--info-rgb: 23, 162, 184;
	--info-secure: rgb(23, 162, 184);
	--info-alert-box: rgba(var(--info-rgb), 0.2);
	--info-alert-text: var(--secure-primary-text);

	--muted-dark: rgb(98, 120, 149);
	--muted-rgb: 98,120,149;
	
	/* Text variables */
	--secure-primary-text: rgb(29, 62, 111);
	--secure-primary-text-rgb: 29,62,111;
	--default-text: rgb(33, 37, 41);
	--text-contrast: var(--gray-50);
	--text-disabled: var(--gray-500);
	--muted: var(--gray-600);

	/* App icons */
	--app-icon-platform: linear-gradient(0deg, rgb(20, 11, 60) 0%, rgb(44, 28, 106) 100%);
	--app-icon: linear-gradient( 5deg, rgb(71, 187, 213) 0%, rgb(115, 222, 239) 100%);
	--app-icon-sub-icon: rgb(71, 187, 213);
	--app-panel-hover: var(--gray-200);

	/* Structure styling */
	--background: var(--gray-300);
	--background-hover: var(--gray-200);
	--section-background: var(--gray-50); /* This needs renaming, but it's too ambiguous as to what it is used for currently */
	--section-border: var(--gray-400);
	--border-strong: var(--gray-500);
	--border-light: rgba(10,10,30,0.06);
	--accordion-header: var(--gray-200);

	--skeleton-background: var(--gray-400);
	--skeleton-background-highlight: var(--gray-50);

	--scrollbar-track: rgb(241, 241, 241);
	--scrollbar-thumb: rgb(153, 153, 153);

	--logon-footer-background-rgb: 33,21,81;

	--shadow-small: 2px 4px 8px rgba(10,20,40,0.15);
	--shadow-medium: 3px 6px 12px rgba(10,20,40,0.19);
	--shadow-large: 4px 8px 18px rgba(10,20,40,0.24);

	/* Table styling */
	--table-border: var(--gray-50);
	--table-header: var(rgb(33, 21, 81)); /* Old style tables */
	--table-row: var(--gray-50);
	--table-row-hover: var(--gray-100);
	--table-row-border: var(--gray-50);
	--table-footer-color: var(--gray-700);
	--background-column-total: var(--gray-500);

	/* Charts */
	--chart-lines: rgb(33, 37, 41);
	--chart-column-pre: rgb(176, 186, 201);
	--chart-column-post: rgb(82, 196, 26);
	--chart-effect-bg: rgb(230, 244, 234);
	--chart-effect-text: rgb(11, 54, 110);

	/* Info Tile */
	--info-tile-background: var(--gray-400);

	/* Form styling */
	--help-icon: rgba(10, 10, 40, 0.35);
	--form-control: var(--gray-300);
	--input: var(--gray-50);
	--input-border: var(--gray-500);
	--input-border-disabled: var(--gray-400);
	--input-text: var(--gray-800);
	--button-text: var(--secure-primary-text);

	--overlay: rgba(186,198,214,0.65);
	--toolbar-background: var(--gray-50);

	/* Lightboxes, dropdown menu's */
	--modal-background: var(--gray-50);
	--modal-border: var(--gray-500);
	--modal-hover: var(--gray-300);

	--form-control-container: rgba(5,15,40,0.07);

	--notification-hover: var(--gray-400);

	/* Variables only used in old styles - potentially remove? */
	--nav-hover: var(--gray-300);
}

html.dark-theme, :root.dark-theme {
	--plain-rgb: 0,0,0;

	--primary-base: rgb(75, 175, 222);
	--primary-dark: rgb(108, 193, 232);
	--primary-light: rgb(42, 139, 161);
	--primary-rgb: 75,175,222;

	--success-text: var(--secure-primary-text);
	--success-alert-box: var(--success-secure);
	--success-button: var(--success-secure);
	--success-button-hover: rgb(33, 136, 56);
	--warning-text: var(--secure-primary-text);
	--warning-alert-box: rgb(184, 100, 10);
	--warning-button: rgb(204, 111, 11);
	--warning-button-hover: rgb(204, 112, 0);
	--danger-text: var(--secure-primary-text);
	--danger-alert-box: rgb(88, 21, 28);
	--danger-button: rgb(88, 21, 28);
	--danger-button-hover: rgb(100, 17, 26);
	--info-alert-box: rgb(11, 97, 111);
	--info-alert-text: var(--secure-primary-text);

	--info: rgb(75, 175, 222);
	--info-rgb: 75,175,222;

	/* Text variables */
	--secure-primary-text: var(--dark-gray-200);
	--secure-primary-text-rgb: 201, 209, 217;
	--default-text: var(--gray-200);
	--text-contrast: var(--dark-gray-800);
	--text-disabled: var(--dark-gray-400);
	--muted: var(--dark-gray-300);

	/* App icons */
	--app-icon-platform: linear-gradient(0deg, rgb(62, 34, 188) 0%, rgb(62, 34, 188) 100%);
	--app-icon: linear-gradient( 5deg, rgb(58, 149, 176) 0%, rgb(75, 168, 199) 100%);
	--app-icon-sub-icon: rgb(58, 149, 176);
	--app-panel-hover: var(--dark-gray-800);

	/* Structure styling */
	--background: var(--dark-gray-800);
	--background-hover: var(--dark-gray-700);
	--section-background: var(--dark-gray-700);
	--section-border: var(--dark-gray-500);
	--border-strong: var(--dark-gray-400);
	--border-light: rgba(71,79,92,0.5);
	--accordion-header: var(--dark-gray-800);

	--skeleton-background: var(--dark-gray-500);
	--skeleton-background-highlight: var(--dark-gray-700);

	--scrollbar-track: var(--dark-gray-700);
	--scrollbar-thumb: var(--dark-gray-500);

	--shadow-small: 2px 4px 8px rgba(0, 0, 0, 0.20);
	--shadow-medium: 3px 6px 12px rgba(0, 0, 0,0.25);
	--shadow-large: 4px 8px 18px rgba(0, 0, 0,0.30);

	/* Table styling */
	--table-row: var(--dark-gray-700);
	--table-row-hover: var(--dark-gray-500);
	--table-row-selected: var(--dark-gray-500);
	--table-border: var(--dark-gray-400);
	--table-header: var(--dark-gray-300);
	--table-row-border: var(--dark-gray-400);
	--table-footer-color: var(--dark-gray-300);
	--background-column-total: var(--dark-gray-400);

	/* Charts */
	--chart-lines: rgb(112, 117, 127);
	--chart-column-pre: rgb(117, 131, 152);
	--chart-column-post: rgb(40, 167, 69);
	--chart-effect-bg: rgba(40, 167, 69, 0.2);
	--chart-effect-text: var(--dark-gray-200);

	/* Info Tile */
	--info-tile-background: var(--dark-gray-600);

	/* Form styling */
	--help-icon: var(--dark-gray-400);
	--form-control: rgb(35, 37, 44);
	--input: rgb(35, 37, 44);
	--input-border: rgb(63, 74, 89);
	--input-border-disabled: rgb(42, 45, 54);
	--input-text: var(--dark-gray-300);
	--button-text: var(--default-text);

	--overlay: rgba(49, 54, 70, 0.66);
	--toolbar-background: rgb(17, 18, 22);

	/* Lightboxes, dropdown menu's */
	--modal-background: var(--dark-gray-700);
	--modal-border: var(--dark-gray-400);
	--modal-hover: var(--dark-gray-500);

	--form-control-container: rgba(171, 181, 207, 0.1);

	--notification-hover: var(--dark-gray-500);

	/* Variables only used in old styles - potentially remove? */
	--nav-hover: rgb(35, 37, 44);
}

/*# sourceMappingURL=theme.css.map*/