:root {
	/*MAIN colors for text and navigation support */	
	--color-primary: #53575d;
	--color-accent: #3d5c76;

	/*CONTENT styling*/
	--color-background: #53575d;
	--color-surface: #ffffff;
	--color-backface: #f5f5f5;
	--color-on-primary: #ffffff;
	--color-on-surface: var(--color-primary);

	/* LINKS styling*/
	--color-link: #3d5c76;
	--color-link-hover: #043f48;

	/* HEADER banner for Portal, Enrolment, Pwd reset etc*/	
	--color-header-background: #53575d;
	--color-header-text: #ffffff;
	--color-progress-filled: #53575d;


	/* BUTTON styling*/
	--color-button-background: #3d5c76;
	--color-button-background-hover: #ffffff;
	--color-button-text: #ffffff;
	--color-button-text-hover: #3d5c76;
	--button-border: 1px solid #3d5c76;
    --button-border-hover: 1px solid #3d5c76;
	--color-button-text-disabled: #ffffff;
	--color-button-background-disabled: #87a9c5;
	--button-radius: 3rem;
	
	/* BACKGROUND image for authentication*/	
	--background-image: url("background.jpg") no-repeat center center/cover fixed;

	/* SPINNER used for BankID, Freja, Fortified ID app and Passkey. Note, top is transparent*/
	--color-loader-indicator-top: rgba(149, 209, 249, 0.7);
	--color-loader-indicator-middle: #e1e1d9;
	--color-loader-indicator-bottom: #3d5c76;
}