Some styles for the feedback page

blue-page.scss

.guidance-layout {
	.govuk-back-link {
		margin-bottom: 0;
	}
}

.guidance-container {
	background: govuk-colour(blue);
	color: govuk-colour(white);
	padding: govuk-spacing(6);
	h1, h2, h3, p, ul, legend, label {
		color: govuk-colour(white);
		max-width: 40rem;
		.wide-screen-true & {
			max-width: 50rem;
		}
	}
	a, a:visited, a:link {
		color: white;
		&:hover {
			color: darken(white, 10%);
		}
	}
	p.govuk-body, label, li {
		@include govuk-font(24);
	}
	.middle-start-page {
		p.govuk-body, label, li {
			@include govuk-font(19);
		}
	}
	a.govuk-button, .govuk-button {
		background-color: govuk-colour(white);
		color: govuk-colour(blue);
		box-shadow: darken(govuk-colour(blue), 20%) 0px 2px 0px 0px;
		&:focus, &:hover {
			background-color: darken(govuk-colour(white), 5%);
			color: govuk-colour(blue);
		}
	}
	img {
		@include mq($until: tablet) {
			margin-bottom: govuk-spacing(6);
		}
	}
	.image-with-margin {
		margin-bottom: govuk-spacing(6);
	}
	.guidance-pull-button {
		@include mq($from: tablet) {
			margin-top: -45px;
		}
	}
	.svg-container {
		margin-bottom: govuk-spacing(3);
		@include mq($from: tablet) {
			margin-bottom: 0;
		}
	}
}

.guidance-numbered-steps {
	@include govuk-font(24);
	li {
		margin-bottom: govuk-spacing(2);
	}
}

.guidance-titles-wrapper {
	@include govuk-clearfix;
}

.guidance-page-title-wrapper {
	@include mq($from: tablet) {
		float: left;
		width: 60%;
	}
}

.guidance-title-wrapper {
	@include mq($from: tablet) {
		float: right;
		text-align: right;
		width: 40%;
	}
	margin-bottom: govuk-spacing(6);
}

.guidance-title {
	@include govuk-font(19, $weight: bold);
	margin-bottom: 0;
}

.guidance-step-count {
	@include govuk-font(19);
	display: block;
}

.photo-guidance-images-with-results {
	list-style: none;
	margin: 0; padding: 0;
	margin-bottom: govuk-spacing(6);
	img {
		margin: 0;
	}
	li {
		display: inline-block;
		margin-right: 5px;
		position: relative;
		.result {
			background: govuk-colour(white);
			bottom: 0;
			color: govuk-colour(black);
			position: absolute;
			width: 100%;
			p {
				@include govuk-font(16);
				color: govuk-colour(black);

			}
		}
	}
	.result {
		.failed, .approved {
			margin: 0;
			padding: 8px 28px 5px 8px;
			background-repeat: no-repeat;
			background-position: right 7px center;
			background-size: 18px;
			@include mq($from: tablet) {
				padding-top: 11px;
				padding-right: 34px;
				padding-bottom: 8px;
				background-size: 22px;
			}
		}
		.approved {
			background-image: url(../images/icon-thick-tick.svg);
		}
		.failed {
			background-image: url(../images/icon-thick-cross.svg);
		}
	}
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.spinner-container {
	animation-name: spin;
	animation-duration: 2000ms;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	width: 40px;
	height: 40px;
}

.loading-container {
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	align-items: center;
	height: 150px;
	margin-top: 50px;
	svg {
		width: 40px;
		height: 40px;
		path {
			fill: white;
		}
	}
}

.feedback-countdown-container {
	display: flex;
	justify-content: space-between;
	p {
		margin-bottom: 0;
	}
	.countdown-container {
		display: flex;
		justify-content: center;
	}
	.countdown-visual {
		display: flex;
		align-items: center;
		justify-content: flex-end;
		text-align: right;
		width: 40px;
	}
	.pause-button, .play-button {
		margin-right: 15px;
		svg {
				width: 30px;
				height: 30px;
			}
		path {
				fill: white;
			}
	}
}