/* Light theme */
[data-color-mode="light"] {
	--page-background: #FFFFFF;
	--text-alert-color: #EB0C00;
	--background-alert-color: #FF968D;
	--background-lighter-color: #FAFAFA;
    --background-light-color: #F2F2F2;
	--border-medium-color: #949494;
	--border-light-color: #CCCCCC;
	--border-lighter-color: #EFEFEF;
	--overlay-hiddenPage-color: #FFFFFFF2; /* 95% */
	--overlay-toolbar-color: var(--page-background);
	--overlay-visiblePage-color: #FFFFFF80; /* 50% */
    --overlay-dark-color: #00000080; /* 50% */
	--system-color-text-light: #767676;
	--fill-light-color: var(--page-background);
	--highlight-search-color: #2E71D33C; /*#D0DFF5*/
    --highlight-search-color-active: #78C0423C; /*#E1F1D5*/
	--chart-color-1: #0A84FF;
	--chart-color-2: #FF375F;
	--chart-color-3: #248A3E;

	--icons-powerpoint:		#C43E1C;
	--icons-word:			#4A90E2;
	--icons-excel:			#009245;
	--icons-pdf:			#FF0D00;
	--icons-illustrator:	#E0682B;
	--icons-indesign:		#D13994;
	--icons-photoshop:		#0A84FF;
	--icons-revit:			#1C63B6;
	--icons-autocad:		#D0021B;
	--icons-deltek:			#084E91;
	--icons-newforma:		#4F8C92;
	--icons-openasset:		#62A43D;
	--icons-teams:			#464EB8;
	--icons-unanet:			#10365A;
	--icons-aec360:			#00395F;
	--icons-dynamics:		#0672C9;

	/* The following applies to both light and dark. It should move to site.css after the feature flag is done. */
	.imgBox:not(.circleBorder) {
		background-color: var(--fill-light-color);
	}
}

[data-color-mode="dark"] [data-color-mode="light"] {
	/* in branding we need light mode to be able to override dark mode so this just resets the image filter for light mode components on a dark page */
	img {
		filter: none;
	}
}