html {
	/* Primary colours */
	--primaryYellow-100: #ffcc00; /* Primary Yellow 100% tint */
	--primaryYellow-75: #ffda26; /* 75% tint of Primary Yellow */
	--primaryYellow-50: #ffe67a; /* 50% tint of Primary Yellow */
	--primaryYellow-25: #fff3be; /* 25% tint of Primary Yellow */
	/* --beaconYellow: #FFFF00; Hollard products are not permitted to use Beacon Yellow */
	--black: #000000;
	--grey: #bebeb9;
	--greyLight: #ebebeb;
	--white: #ffffff;

	/* Accent colours */

	--redEarth-100: #fa915a;
	--redEarth-75: #ffae82;
	--redEarth-50: #ffc9ad;
	--redEarth-25: #ffe4d6;

	--redDusk: #ffaa87; /* 100% tint is the only option */

	--greenOcean-100: #1dbeb0;
	--greenOcean-75: #00d0c5;
	--greenOcean-50: #55dfd8;
	--greenOcean-25: #b5efec;

	--blueSky-100: #54c2e8;
	--blueSky-75: #3ad2ef;
	--blueSky-50: #8ee1f5;
	--blueSky-25: #c9f0fa;
}

a {
	color: var(--black);
}

.logos {
	background-color: var(--greyLight);
	border-color: var(--grey);
}

.disconnection-reason[hidden] {
	display: none;
}
.disconnection-reason {
	background-color: var(--primaryYellow-25);

	& .message {
		background-color: var(--primaryYellow-100);

		& button {
			background-color: var(--white);

			&:hover,
			&:focus {
				background-color: var(--greyLight);
			}
		}
	}
}