diff --git a/packages/webui/src/client/styles/_itemTypeColors.scss b/packages/webui/src/client/styles/_itemTypeColors.scss
index d848050805b..2e220f56818 100644
--- a/packages/webui/src/client/styles/_itemTypeColors.scss
+++ b/packages/webui/src/client/styles/_itemTypeColors.scss
@@ -359,24 +359,6 @@ $layer-types: join($layer-types-solid, $layer-types-gradient);
 	&.source-unknown-state,
 	&.source-not-ready {
 		&::before {
-			@keyframes animated-zebra {
-				0% {
-					opacity: 0.4;
-				}
-				49% {
-					opacity: 0.4;
-				}
-				50% {
-					opacity: 0.9;
-				}
-				99% {
-					opacity: 0.9;
-				}
-				100% {
-					opacity: 0.4;
-				}
-			}
-
 			content: ' ';
 			display: block;
 			position: absolute;
@@ -404,6 +386,24 @@ $layer-types: join($layer-types-solid, $layer-types-gradient);
 				transparent 13px,
 				transparent 16px
 			);
+
+			@keyframes animated-zebra {
+				0% {
+					opacity: 0.4;
+				}
+				49% {
+					opacity: 0.4;
+				}
+				50% {
+					opacity: 0.9;
+				}
+				99% {
+					opacity: 0.9;
+				}
+				100% {
+					opacity: 0.4;
+				}
+			}
 		}
 	}
 
diff --git a/packages/webui/src/client/styles/_variables.scss b/packages/webui/src/client/styles/_variables.scss
index b7b6df11172..4dfc62857bc 100644
--- a/packages/webui/src/client/styles/_variables.scss
+++ b/packages/webui/src/client/styles/_variables.scss
@@ -27,5 +27,5 @@ $segment-storyboard-thumbnail-height: 2.9rem;
 $portrait-mode-breakpoint: 35em;
 
 @function rem($pixels, $context: $browser-context) {
-	@return #{$pixels/$context}rem;
+	@return #{calc($pixels/$context)}rem;
 }
diff --git a/packages/webui/src/client/styles/notifications.scss b/packages/webui/src/client/styles/notifications.scss
index d9f21cddc56..7e30971cd02 100644
--- a/packages/webui/src/client/styles/notifications.scss
+++ b/packages/webui/src/client/styles/notifications.scss
@@ -216,8 +216,8 @@
 	.notifications__toggle-button__icon {
 		> svg {
 			position: absolute;
-			width: #{$fullscreen-controls__button--radius / 1.75};
-			height: #{$fullscreen-controls__button--radius / 1.75};
+			width: calc($fullscreen-controls__button--radius / 1.75);
+			height: calc($fullscreen-controls__button--radius / 1.75);
 			top: 50%;
 			left: 50%;
 			transform: translate(-50%, -50%);
diff --git a/packages/webui/src/client/styles/rundownView.scss b/packages/webui/src/client/styles/rundownView.scss
index 18e9253a41f..065eba48b63 100644
--- a/packages/webui/src/client/styles/rundownView.scss
+++ b/packages/webui/src/client/styles/rundownView.scss
@@ -107,6 +107,7 @@ $break-width: 35rem;
 	transition: 0s padding-right 0s;
 
 	.invert-flash {
+		animation: invert-flash 1s infinite;
 		@keyframes invert-flash {
 			0% {
 				filter: #{'invert()'};
@@ -121,8 +122,6 @@ $break-width: 35rem;
 				filter: none;
 			}
 		}
-
-		animation: invert-flash 1s infinite;
 	}
 
 	.rundown-view__part__icon {
@@ -454,14 +453,11 @@ svg.icon {
 	grid-column-gap: 0;
 	grid-row-gap: 0;
 
-	grid-template-columns: [segment-name] ($segment-header-width / 2) [duration-onAirIn-split] ($segment-header-width / 2) [segment-group-controls] $segment-group-controls-width [timeline] auto [end]; // 120px [future-timeline-end]
+	grid-template-columns:
+		[segment-name] calc($segment-header-width / 2) [duration-onAirIn-split] calc($segment-header-width / 2)
+		[segment-group-controls] $segment-group-controls-width [timeline] auto [end]; // 120px [future-timeline-end]
 	grid-template-rows: [header] $segment-header-height [main-view] auto [zoom-area] auto [end];
 
-	@media screen and (max-width: $break-width) {
-		grid-template-columns: [start] $segment-group-controls-width [timeline] auto [toggle-view] 30px [end];
-		grid-template-rows: [header] $segment-header-height [title] auto [timeline-header] $segment-header-height [output-layers] auto [zoom-area] auto [end];
-	}
-
 	overflow: hidden;
 	user-select: none;
 	-moz-user-select: none;
@@ -475,10 +471,15 @@ svg.icon {
 	box-shadow: 7px 6px 15px 0px rgba(0, 0, 0, 0.3);
 
 	--segment-layer-height: #{$segment-layer-height};
-	--infinite-piece-background-line-height: #{$segment-layer-height / 8};
+	--infinite-piece-background-line-height: calc($segment-layer-height / 8);
 	border-radius: $segment-border-radius;
 	border-bottom: 1px solid black;
 
+	@media screen and (max-width: $break-width) {
+		grid-template-columns: [start] $segment-group-controls-width [timeline] auto [toggle-view] 30px [end];
+		grid-template-rows: [header] $segment-header-height [title] auto [timeline-header] $segment-header-height [output-layers] auto [zoom-area] auto [end];
+	}
+
 	// padding has to be the same on both of these elements so that the layers and their controls line up
 	.segment-timeline__output-layers,
 	.segment-timeline__timeline {
@@ -496,13 +497,6 @@ svg.icon {
 		padding: 0;
 		overflow: hidden;
 
-		grid-column: segment-name / segment-group-controls;
-		grid-row: main-view / end;
-		@media screen and (max-width: $break-width) {
-			grid-column: start / end;
-			grid-row: title / timeline-header;
-		}
-
 		transition: $output-layer-group-collapse-animation-duration opacity,
 			$output-layer-group-collapse-animation-duration visibility 0s;
 
@@ -510,6 +504,13 @@ svg.icon {
 
 		word-break: break-word;
 
+		grid-column: segment-name / segment-group-controls;
+		grid-row: main-view / end;
+		@media screen and (max-width: $break-width) {
+			grid-column: start / end;
+			grid-row: title / timeline-header;
+		}
+
 		h2 {
 			margin: 0;
 			padding: 0.3em;
@@ -676,13 +677,6 @@ svg.icon {
 		padding: 0;
 		text-align: right;
 
-		grid-column: segment-name / duration-onAirIn-split;
-		grid-row: header / main-view;
-		@media screen and (max-width: $break-width) {
-			grid-column: start / timeline;
-			grid-row: header / title;
-		}
-
 		padding-right: 0px;
 		margin-right: 0em;
 		font-size: 1em;
@@ -692,6 +686,13 @@ svg.icon {
 
 		transition: 0.3s color;
 
+		grid-column: segment-name / duration-onAirIn-split;
+		grid-row: header / main-view;
+		@media screen and (max-width: $break-width) {
+			grid-column: start / timeline;
+			grid-row: header / title;
+		}
+
 		> span.negative {
 			transition: none;
 			color: $general-late-color;
@@ -724,13 +725,13 @@ svg.icon {
 	}
 
 	.segment-timeline__timeUntil {
+		color: #888;
+		cursor: pointer;
+
 		grid-column: duration-onAirIn-split / segment-group-controls;
 		@media screen and (max-width: $break-width) {
 			grid-column: timeline / toggle-view;
 		}
-
-		color: #888;
-		cursor: pointer;
 	}
 
 	&.time-of-day-countdowns {
@@ -746,13 +747,6 @@ svg.icon {
 }
 
 .segment-timeline__switch-view-mode-button {
-	grid-row: header / main-view;
-	grid-column: timeline / end;
-	@media screen and (max-width: $break-width) {
-		grid-column: toggle-view / end;
-		grid-row: header / title;
-	}
-
 	justify-self: end;
 	align-self: start;
 	z-index: 1;
@@ -768,6 +762,13 @@ svg.icon {
 	margin-top: 0.1em;
 	margin-right: 0.1em;
 
+	grid-row: header / main-view;
+	grid-column: timeline / end;
+	@media screen and (max-width: $break-width) {
+		grid-column: toggle-view / end;
+		grid-row: header / title;
+	}
+
 	&:hover {
 		background: #8c8c8c;
 		transition: 0s background-color;
@@ -797,15 +798,15 @@ svg.icon {
 		grid-column: segment-group-controls / timeline;
 		grid-row: header / end;
 
+		align-self: end;
+		grid-template-columns: 1fr 1fr 1fr;
+		padding: 0 1.2em 0.05em;
+
 		@media screen and (max-width: $break-width) {
 			grid-column: start / timeline;
 			grid-row: zoom-area / end;
 		}
 
-		align-self: end;
-		grid-template-columns: 1fr 1fr 1fr;
-		padding: 0 1.2em 0.05em;
-
 		> .segment-timeline__timeline-zoom-buttons__button {
 			min-width: 22px;
 			min-height: 22px;
@@ -878,11 +879,13 @@ svg.icon {
 		background: $segment-next-preview-background-color;
 		opacity: 1;
 		transition: $output-layer-group-collapse-animation-duration opacity
-				($output-layer-group-collapse-animation-duration * 1/2),
-			$output-layer-group-collapse-animation-duration margin ($output-layer-group-collapse-animation-duration * 1/2);
+				calc($output-layer-group-collapse-animation-duration * 0.5),
+			$output-layer-group-collapse-animation-duration margin calc($output-layer-group-collapse-animation-duration * 0.5);
 	}
 
 	.segment-timeline__zoom-area-container {
+		transition: 1s opacity, 0s visibility;
+
 		grid-column: timeline / end;
 		grid-row: zoom-area / end;
 		@media screen and (max-width: $break-width) {
@@ -890,8 +893,6 @@ svg.icon {
 			grid-row: zoom-area / end;
 		}
 
-		transition: 1s opacity, 0s visibility;
-
 		&.hidden {
 			opacity: 0;
 			transition: 1s opacity, 0s visibility 1s;
@@ -1073,33 +1074,26 @@ svg.icon {
 			.segment-timeline__timeline-container - contains the timeline elements and the live-line and other lines
 	*/
 	.segment-timeline__timeline-background {
-		grid-column: timeline / end;
-		grid-row: main-view / zoom-area;
-		@media screen and (max-width: $break-width) {
-			grid-column: timeline / end;
-			grid-row: output-layers / zoom-area;
-		}
-
 		min-width: 0;
 		overflow: hidden;
 		background: $segment-timeline-background-color;
 		opacity: 1;
 		transition: $output-layer-group-collapse-animation-duration opacity
-				($output-layer-group-collapse-animation-duration * 1/2),
+				calc($output-layer-group-collapse-animation-duration * 0.5),
 			$output-layer-group-collapse-animation-duration margin-bottom
-				($output-layer-group-collapse-animation-duration * 1/2);
+				calc($output-layer-group-collapse-animation-duration * 0.5);
 		margin-bottom: 1.5em;
 		margin-left: 2px;
-	}
 
-	.segment-timeline__timeline-grid {
 		grid-column: timeline / end;
-		grid-row: header / zoom-area;
+		grid-row: main-view / zoom-area;
 		@media screen and (max-width: $break-width) {
 			grid-column: timeline / end;
-			grid-row: timeline-header / zoom-area;
+			grid-row: output-layers / zoom-area;
 		}
+	}
 
+	.segment-timeline__timeline-grid {
 		min-width: 0;
 		overflow: hidden;
 		margin-bottom: 1.15em;
@@ -1108,7 +1102,7 @@ svg.icon {
 		opacity: 1;
 		visibility: visible;
 		transition: $output-layer-group-collapse-animation-duration opacity
-				($output-layer-group-collapse-animation-duration * 1/2),
+				calc($output-layer-group-collapse-animation-duration * 0.5),
 			$output-layer-group-collapse-animation-duration visibility 0s;
 
 		color: #707070;
@@ -1119,20 +1113,27 @@ svg.icon {
 		--timeline-grid-long-line-height: 0;
 		--timeline-grid-short-line-top: 30px;
 		--timeline-grid-short-line-height: 6px;
-	}
 
-	.segment-timeline__timeline-container {
 		grid-column: timeline / end;
 		grid-row: header / zoom-area;
 		@media screen and (max-width: $break-width) {
 			grid-column: timeline / end;
 			grid-row: timeline-header / zoom-area;
 		}
+	}
 
+	.segment-timeline__timeline-container {
 		min-width: 0;
 		min-height: 0;
 
 		overflow: hidden;
+
+		grid-column: timeline / end;
+		grid-row: header / zoom-area;
+		@media screen and (max-width: $break-width) {
+			grid-column: timeline / end;
+			grid-row: timeline-header / zoom-area;
+		}
 	}
 
 	.segment-timeline__liveline-shade {
@@ -1399,12 +1400,13 @@ svg.icon {
 				&.quickloop-start {
 					left: -2px;
 
-					&::before, &::after {
+					&::before,
+					&::after {
 						z-index: 1;
 						margin-left: 5px;
 						border-left-color: white;
 					}
-					
+
 					.segment-timeline__part__nextline__label {
 						z-index: 5;
 						left: 5px;
@@ -1586,7 +1588,6 @@ svg.icon {
 				}
 			}
 
-
 			&:not(.live) {
 				.segment-timeline__part__nextline.auto-next:not(.segment-timeline__part__nextline--endline),
 				.segment-timeline__part__nextline.invalid:not(.segment-timeline__part__nextline--endline) {
@@ -1832,7 +1833,8 @@ svg.icon {
 					right: 0;
 				}
 
-				.segment-timeline__part__quickloop-start, .segment-timeline__part__quickloop-end {
+				.segment-timeline__part__quickloop-start,
+				.segment-timeline__part__quickloop-end {
 					background: $segment-background-color;
 					padding: 0 0.3em;
 					margin-bottom: -2px;
@@ -1849,7 +1851,7 @@ svg.icon {
 
 				.segment-timeline__part__quickloop-end {
 					padding-right: 0.6em;
-					margin-left: auto
+					margin-left: auto;
 				}
 			}
 
@@ -2087,30 +2089,30 @@ svg.icon {
 								.segment-timeline__piece__label {
 									opacity: 0;
 									visibility: hidden;
-									transition: ($output-layer-group-collapse-animation-duration * 1/3) opacity,
-										0s visibility ($output-layer-group-collapse-animation-duration * 1/3);
+									transition: calc($output-layer-group-collapse-animation-duration / 3) opacity,
+										0s visibility calc($output-layer-group-collapse-animation-duration / 3);
 								}
 
 								.segment-timeline__piece--collapsed__step-chevron {
 									opacity: 1;
 									visibility: visible;
-									transition: ($output-layer-group-collapse-animation-duration * 1/3) opacity
-											$output-layer-group-collapse-animation-duration * 4/3,
-										0s visibility $output-layer-group-collapse-animation-duration * 4/3;
+									transition: calc($output-layer-group-collapse-animation-duration / 3) opacity
+											calc($output-layer-group-collapse-animation-duration * 4 / 3),
+										0s visibility calc($output-layer-group-collapse-animation-duration * 4 / 3);
 								}
 
 								.segment-timeline__piece--decoration__step-chevron {
 									opacity: 0;
 									visibility: hidden;
-									transition: ($output-layer-group-collapse-animation-duration * 1/3) opacity,
-										0s visibility ($output-layer-group-collapse-animation-duration * 1/3);
+									transition: calc($output-layer-group-collapse-animation-duration / 3) opacity,
+										0s visibility calc($output-layer-group-collapse-animation-duration / 3);
 								}
 							}
 						}
 
 						&.layer-count-1 {
 							.segment-timeline__layer {
-								max-height: $segment-layer-height / 2;
+								max-height: calc($segment-layer-height / 2);
 							}
 						}
 					}
@@ -2120,8 +2122,8 @@ svg.icon {
 			.segment-timeline__piece--collapsed__step-chevron {
 				opacity: 0;
 				visibility: hidden;
-				transition: ($output-layer-group-collapse-animation-duration * 1/3) opacity,
-					0s visibility ($output-layer-group-collapse-animation-duration * 1/3);
+				transition: calc($output-layer-group-collapse-animation-duration / 3) opacity,
+					0s visibility calc($output-layer-group-collapse-animation-duration / 3);
 				position: absolute;
 				top: 0;
 				left: 0;
@@ -2136,7 +2138,7 @@ svg.icon {
 			.segment-timeline__piece--decoration__step-chevron {
 				opacity: 1;
 				visibility: visible;
-				transition: ($output-layer-group-collapse-animation-duration * 1/3) opacity
+				transition: calc($output-layer-group-collapse-animation-duration / 3) opacity
 						$output-layer-group-collapse-animation-duration,
 					0s visibility $output-layer-group-collapse-animation-duration;
 				position: absolute;
@@ -2155,8 +2157,8 @@ svg.icon {
 				margin: 0 0.3em;
 				text-shadow: 0.5px 0.5px 8px rgba(0, 0, 0, 0.8);
 				font-weight: 400;
-				transition: ($output-layer-group-collapse-animation-duration * 1/3) opacity
-					($output-layer-group-collapse-animation-duration * 2/3);
+				transition: calc($output-layer-group-collapse-animation-duration / 3) opacity
+					calc($output-layer-group-collapse-animation-duration * 2 / 3);
 				pointer-events: none;
 				display: inline-block;
 				white-space: nowrap;
@@ -2417,6 +2419,10 @@ svg.icon {
 
 	// This is the output layer controls section in the middle
 	.segment-timeline__output-layers {
+		transition: $output-layer-group-collapse-animation-duration padding ease-in-out;
+
+		margin: 0 0.3em;
+
 		grid-column: segment-group-controls / timeline;
 		grid-row: header / zoom-area;
 		@media screen and (max-width: $break-width) {
@@ -2424,10 +2430,6 @@ svg.icon {
 			grid-row: timeline-header / zoom-area;
 		}
 
-		transition: $output-layer-group-collapse-animation-duration padding ease-in-out;
-
-		margin: 0 0.3em;
-
 		// this is a single output-layer container
 		.segment-timeline__output-layer-control {
 			line-height: $segment-layer-height;
@@ -2477,8 +2479,8 @@ svg.icon {
 					width: 50px;
 					box-sizing: border-box;
 					opacity: 1;
-					transition: ($output-layer-group-collapse-animation-duration * 1/3) opacity
-						($output-layer-group-collapse-animation-duration * 1/3);
+					transition: calc($output-layer-group-collapse-animation-duration / 3) opacity
+						calc($output-layer-group-collapse-animation-duration / 3);
 				}
 
 				.segment-timeline__output-layer-control__label {
@@ -2506,7 +2508,7 @@ svg.icon {
 					}
 
 					&::after {
-						transition: ($output-layer-group-collapse-animation-duration * 1/3) opacity;
+						transition: calc($output-layer-group-collapse-animation-duration / 3) opacity;
 						opacity: 0;
 					}
 				}
@@ -2593,8 +2595,8 @@ svg.icon {
 				}
 
 				&::after {
-					transition: ($output-layer-group-collapse-animation-duration * 1/3) opacity,
-						0s visibility ($output-layer-group-collapse-animation-duration * 1/3);
+					transition: calc($output-layer-group-collapse-animation-duration / 3) opacity,
+						0s visibility calc($output-layer-group-collapse-animation-duration / 3);
 					opacity: 0 !important;
 					visibility: hidden;
 				}
@@ -2646,8 +2648,8 @@ svg.icon {
 							.segment-timeline__piece__label {
 								opacity: 0;
 								visibility: hidden;
-								transition: ($output-layer-group-collapse-animation-duration * 1/3) opacity,
-									0s visibility ($output-layer-group-collapse-animation-duration * 1/3);
+								transition: calc($output-layer-group-collapse-animation-duration / 3) opacity,
+									0s visibility calc($output-layer-group-collapse-animation-duration / 3);
 							}
 						}
 					}
@@ -2794,6 +2796,8 @@ svg.icon {
 	}
 
 	.rundown-divider-timeline__notifications {
+		margin-right: 0.8em;
+
 		font-size: 0.8em;
 		font-weight: 400;
 		> svg {
@@ -2805,7 +2809,6 @@ svg.icon {
 			position: relative;
 			top: 0.05em;
 		}
-		margin-right: 0.8em;
 	}
 
 	> .rundown-divider-timeline__expected-start,
diff --git a/packages/webui/src/client/styles/shelf/adLibPanel.scss b/packages/webui/src/client/styles/shelf/adLibPanel.scss
index 3db5fe9e02a..f82bef42979 100644
--- a/packages/webui/src/client/styles/shelf/adLibPanel.scss
+++ b/packages/webui/src/client/styles/shelf/adLibPanel.scss
@@ -78,13 +78,13 @@ $adlib-item-selected-color: var(--adlib-item-selected-color);
 		grid-column: list-view / end;
 		grid-row: tool-bar / list-view;
 
+		display: flex;
+		padding: 10px 5px;
+
 		&--no-segments {
 			grid-column: template-list / end;
 		}
 
-		display: flex;
-		padding: 10px 5px;
-
 		> .adlib-panel__list-view__toolbar__filter {
 			flex: 2 2;
 			max-width: 25em;
diff --git a/packages/webui/src/client/styles/shelf/dashboard.scss b/packages/webui/src/client/styles/shelf/dashboard.scss
index 90d2bb1d0c3..e9217380c4a 100644
--- a/packages/webui/src/client/styles/shelf/dashboard.scss
+++ b/packages/webui/src/client/styles/shelf/dashboard.scss
@@ -86,13 +86,13 @@ $dashboard-button-height: 5.625em;
 			}
 
 			> .dashboard-panel__panel__button--standalone {
+				width: calc(100% - 8px);
+				height: calc(100% - 8px);
+
 				&.type--take {
 					background-color: $general-live-color;
 				}
 
-				width: calc(100% - 8px);
-				height: calc(100% - 8px);
-
 				&.active {
 					background-color: #761912;
 				}
@@ -124,13 +124,13 @@ $dashboard-button-height: 5.625em;
 		grid-column: list-view / end;
 		grid-row: tool-bar / list-view;
 
+		display: flex;
+		padding: 0.625rem 0.313rem;
+
 		&--no-segments {
 			grid-column: template-list / end;
 		}
 
-		display: flex;
-		padding: 0.625rem 0.313rem;
-
 		> .adlib-panel__list-view__toolbar__filter {
 			flex: 2 2;
 			max-width: 25rem;
@@ -315,6 +315,12 @@ $dashboard-button-height: 5.625em;
 		}
 
 		&.live {
+			box-shadow: $dashboard-panel__button__border-width $dashboard-panel__button__border-width 0 $general-live-color,
+				($dashboard-panel__button__border-width * -1) ($dashboard-panel__button__border-width * -1) 0
+					$general-live-color,
+				($dashboard-panel__button__border-width * -1) $dashboard-panel__button__border-width 0 $general-live-color,
+				$dashboard-panel__button__border-width ($dashboard-panel__button__border-width * -1) 0 $general-live-color;
+
 			@keyframes button-flash {
 				0% {
 					opacity: 1;
@@ -342,12 +348,6 @@ $dashboard-button-height: 5.625em;
 				z-index: 10;
 				// animation: 2s button-flash normal infinite;
 			}
-
-			box-shadow: $dashboard-panel__button__border-width $dashboard-panel__button__border-width 0 $general-live-color,
-				($dashboard-panel__button__border-width * -1) ($dashboard-panel__button__border-width * -1) 0
-					$general-live-color,
-				($dashboard-panel__button__border-width * -1) $dashboard-panel__button__border-width 0 $general-live-color,
-				$dashboard-panel__button__border-width ($dashboard-panel__button__border-width * -1) 0 $general-live-color;
 		}
 
 		&.disabled {
@@ -618,7 +618,7 @@ $dashboard-button-height: 5.625em;
 			}
 		}
 	}
-	
+
 	&.dashboard-panel__panel--bucket {
 		$dashboard-button-width: 10.625em;
 		$dashboard-button-height: 8.90625em;
@@ -626,13 +626,12 @@ $dashboard-button-height: 5.625em;
 		$dashboard-button-thumbnail-height: $dashboard-button-height - $dashboard-button-label-height;
 
 		.dashboard-panel__panel__group {
-	
 			.dashboard-panel__panel__group__liveline {
 				transform: translate(calc(-1 * #{$dashboard-button-width}), 0);
 				&::after {
 					transform: translate(calc(#{$dashboard-button-width} + -1px), 0);
 				}
-	
+
 				&::before {
 					transform: translate(calc(#{$dashboard-button-width} + -1px), 0);
 				}
@@ -644,15 +643,17 @@ $dashboard-button-height: 5.625em;
 			width: $dashboard-button-width;
 			height: $dashboard-button-height;
 
-			&.source-missing, &.source-not-ready, &.unknown-state, &.source-unknown-state {
+			&.source-missing,
+			&.source-not-ready,
+			&.unknown-state,
+			&.source-unknown-state {
 				&::before {
 					z-index: 2;
 				}
 			}
 
 			> .dashboard-panel__panel__button__content {
-				background: linear-gradient(90deg, rgb(84,84,84) 0%, rgb(61,61,61) 100%);
-			
+				background: linear-gradient(90deg, rgb(84, 84, 84) 0%, rgb(61, 61, 61) 100%);
 
 				> .dashboard-panel__panel__button__label-container {
 					background-color: #000;
@@ -695,7 +696,7 @@ $dashboard-button-height: 5.625em;
 					left: unset;
 					z-index: unset;
 				}
-	
+
 				> .dashboard-panel__panel__button__sub-label {
 					padding: 2px;
 					font-size: 0.9375em;
@@ -707,4 +708,4 @@ $dashboard-button-height: 5.625em;
 			}
 		}
 	}
-}
\ No newline at end of file
+}
diff --git a/packages/webui/src/client/styles/supportAndSwitchboardPanel.scss b/packages/webui/src/client/styles/supportAndSwitchboardPanel.scss
index a7074e64da5..b545d0228a7 100644
--- a/packages/webui/src/client/styles/supportAndSwitchboardPanel.scss
+++ b/packages/webui/src/client/styles/supportAndSwitchboardPanel.scss
@@ -7,8 +7,8 @@
 
 	> svg {
 		position: absolute !important;
-		width: #{$fullscreen-controls__button--radius / 2} !important;
-		height: #{$fullscreen-controls__button--radius / 2.86} !important;
+		width: calc($fullscreen-controls__button--radius / 2) !important;
+		height: calc($fullscreen-controls__button--radius / 2.86) !important;
 		right: 0 !important;
 		left: auto !important;
 		transform: translate(-50%, -53%) !important;
@@ -113,7 +113,6 @@
 	padding: 0;
 	padding-top: rem(15px);
 
-
 	> .media-status-panel__inside {
 		width: 28rem;
 	}
@@ -165,7 +164,7 @@
 }
 
 .rundown-view {
-	.support-pop-up-panel{
+	.support-pop-up-panel {
 		color: #000;
 		--panel-background: #eee;
 		background: var(--panel-background);
diff --git a/packages/webui/src/client/ui/SegmentList/LinePartPieceIndicator/PieceIndicatorMenu.scss b/packages/webui/src/client/ui/SegmentList/LinePartPieceIndicator/PieceIndicatorMenu.scss
index 76fce05b2e1..3547f479e3c 100644
--- a/packages/webui/src/client/ui/SegmentList/LinePartPieceIndicator/PieceIndicatorMenu.scss
+++ b/packages/webui/src/client/ui/SegmentList/LinePartPieceIndicator/PieceIndicatorMenu.scss
@@ -6,13 +6,14 @@
 	padding: 0.2em;
 
 	.segment-storyboard__part__piece {
-		@include piece-colors();
-		@include missing-overlay();
 		user-select: none;
 
 		width: 300px;
 		margin: 0 0 0.2em;
 
+		@include piece-colors();
+		@include missing-overlay();
+
 		&:last-child {
 			margin: 0;
 		}
diff --git a/packages/webui/src/client/ui/SegmentList/SegmentList.scss b/packages/webui/src/client/ui/SegmentList/SegmentList.scss
index d52ccad3417..939d7f0ecff 100644
--- a/packages/webui/src/client/ui/SegmentList/SegmentList.scss
+++ b/packages/webui/src/client/ui/SegmentList/SegmentList.scss
@@ -78,7 +78,7 @@ $identifier-area-width: 3em;
 					&--live {
 						background: $general-live-color;
 						border-radius: 0 ($part-height * 0.7) ($part-height * 0.7) 0;
-						width: $duration-area-width - ($duration-area-margin / 2);
+						width: $duration-area-width - calc($duration-area-margin / 2);
 					}
 				}
 
@@ -150,7 +150,8 @@ $identifier-area-width: 3em;
 					}
 				}
 
-				> .segment-opl__quickloop-start, > .segment-opl__quickloop-end {
+				> .segment-opl__quickloop-start,
+				> .segment-opl__quickloop-end {
 					position: absolute;
 					right: -10px;
 					filter: drop-shadow(0px 1px 2px rgba(0, 0, 0, 0.6));
@@ -308,12 +309,14 @@ $identifier-area-width: 3em;
 						}
 
 						&.quickloop-start {
-							&::before, &::after {
+							&::before,
+							&::after {
 								left: 6px;
 							}
 
 							&:not(.next) {
-								&::before, &::after {
+								&::before,
+								&::after {
 									border-left-color: white;
 								}
 							}
@@ -370,7 +373,6 @@ $identifier-area-width: 3em;
 						font-weight: 400;
 						text-shadow: 0 0 5px rgba(0, 0, 0, 1);
 					}
-
 				}
 
 				> .segment-opl__take-line__quickloop-start {
@@ -521,6 +523,8 @@ $identifier-area-width: 3em;
 					white-space: nowrap;
 
 					> .flash {
+						animation: 0.3s linear 0s infinite normal forwards segment-opl__freeze-marker--flash;
+
 						@keyframes segment-opl__freeze-marker--flash {
 							0% {
 								opacity: 0;
@@ -535,7 +539,6 @@ $identifier-area-width: 3em;
 								opacity: 1;
 							}
 						}
-						animation: 0.3s linear 0s infinite normal forwards segment-opl__freeze-marker--flash;
 					}
 
 					> .segment-opl__freeze-marker-timer {
diff --git a/packages/webui/src/client/ui/SegmentStoryboard/SegmentStoryboard.scss b/packages/webui/src/client/ui/SegmentStoryboard/SegmentStoryboard.scss
index d48c1165795..9dec3f72d20 100644
--- a/packages/webui/src/client/ui/SegmentStoryboard/SegmentStoryboard.scss
+++ b/packages/webui/src/client/ui/SegmentStoryboard/SegmentStoryboard.scss
@@ -13,19 +13,19 @@ $break-width: 35rem;
 		position: relative;
 		overflow: hidden;
 
-		grid-column: timeline / end;
-		grid-row: header / end;
-		@media screen and (max-width: $break-width) {
-			grid-column: timeline / end;
-			grid-row: timeline-header / zoom-area;
-		}
-
 		contain: content style;
 		touch-action: pan-y;
 
 		cursor: ew-resize;
 		cursor: url(/images/cursor_zoom_area_move.png), ew-resize;
 		cursor: url(/images/cursor_zoom_area_move.png) 15 8, ew-resize;
+
+		grid-column: timeline / end;
+		grid-row: header / end;
+		@media screen and (max-width: $break-width) {
+			grid-column: timeline / end;
+			grid-row: timeline-header / zoom-area;
+		}
 	}
 
 	> .segment-storyboard__storyboard-view-controls {
@@ -134,6 +134,8 @@ $break-width: 35rem;
 	}
 
 	> .segment-timeline__source-layers {
+		margin: $segment-storyboard-thumbnail-height 0.3em 0;
+
 		grid-column: segment-group-controls / timeline;
 		grid-row: main-view / zoom-area;
 		@media screen and (max-width: $break-width) {
@@ -141,8 +143,6 @@ $break-width: 35rem;
 			grid-row: output-layers / zoom-area;
 		}
 
-		margin: $segment-storyboard-thumbnail-height 0.3em 0;
-
 		> .segment-timeline__output-group {
 			> .segment-timeline__source-layer {
 				text-align: right;
@@ -164,6 +164,9 @@ $break-width: 35rem;
 	margin-top: 1em;
 	padding: 1.3rem $part-right-padding 1.5rem $part-left-padding;
 
+	--invalid-reason-color-transparent: transparent;
+	--invalid-reason-color-opaque: #{$segment-background-color}; // HERE
+
 	&--invalid {
 		background: $segment-timeline-background-color;
 	}
@@ -257,7 +260,8 @@ $break-width: 35rem;
 			&.segment-storyboard__part__next-line--quickloop-start {
 				border: none;
 
-				&::before, &::after {
+				&::before,
+				&::after {
 					left: 3px;
 					border-color: transparent transparent transparent white;
 				}
@@ -416,7 +420,7 @@ $break-width: 35rem;
 		z-index: 4;
 		background: $segment-background-color;
 	}
-	
+
 	> .segment-storyboard__part__bottom-left {
 		position: absolute;
 		bottom: 0;
@@ -450,7 +454,8 @@ $break-width: 35rem;
 		}
 	}
 
-	.segment-storyboard__part__quickloop-start-icon, .segment-storyboard__part__quickloop-end-icon {
+	.segment-storyboard__part__quickloop-start-icon,
+	.segment-storyboard__part__quickloop-end-icon {
 		background: $segment-background-color;
 		padding: 0 0.3em;
 		white-space: nowrap;
@@ -464,7 +469,8 @@ $break-width: 35rem;
 		}
 	}
 
-	&--quickloop-end + &, &--quickloop-end + .segment-storyboard__part-list--squished-parts > &:last-child {
+	&--quickloop-end + &,
+	&--quickloop-end + .segment-storyboard__part-list--squished-parts > &:last-child {
 		> .segment-storyboard__part__next-line {
 			margin-left: 3px;
 			z-index: 6;
@@ -496,15 +502,15 @@ $break-width: 35rem;
 			background: $segment-background-color;
 			color: #888;
 			font-size: 0.9em;
-	
+
 			opacity: 1;
 			visibility: visible;
-	
+
 			> .rundown-view__part__icon.rundown-view__part__icon--auto-next {
 				top: -0.2em;
 				margin-right: 0.2em;
 			}
-	
+
 			@keyframes segment-storyboard__part-timer--fadeIn {
 				0% {
 					opacity: 0;
@@ -513,14 +519,14 @@ $break-width: 35rem;
 					opacity: 1;
 				}
 			}
-	
+
 			&--live {
 				font-size: 1.2em;
 				line-height: 1em;
 				font-weight: 500;
 				color: $liveline-timecode-color;
 				opacity: 1;
-	
+
 				> .overtime {
 					color: $general-late-color;
 				}
@@ -583,9 +589,6 @@ $break-width: 35rem;
 		}
 	}
 
-	--invalid-reason-color-transparent: transparent;
-	--invalid-reason-color-opaque: #{$segment-background-color}; // HERE
-
 	> .segment-storyboard__part__invalid-cover {
 		position: absolute;
 		top: 0;
diff --git a/packages/webui/src/client/ui/SegmentStoryboard/StoryboardPartThumbnail/StoryboardPartThumbnail.scss b/packages/webui/src/client/ui/SegmentStoryboard/StoryboardPartThumbnail/StoryboardPartThumbnail.scss
index a604ebce52e..97f35651e98 100644
--- a/packages/webui/src/client/ui/SegmentStoryboard/StoryboardPartThumbnail/StoryboardPartThumbnail.scss
+++ b/packages/webui/src/client/ui/SegmentStoryboard/StoryboardPartThumbnail/StoryboardPartThumbnail.scss
@@ -2,6 +2,13 @@
 @import '../../../styles/itemTypeColors';
 
 .segment-storyboard__part__thumbnail {
+	position: relative;
+	width: 100%;
+	height: $segment-storyboard-thumbnail-height;
+	border-radius: 4px;
+	overflow: hidden;
+	cursor: default;
+
 	@include item-type-colors();
 	@include missing-overlay();
 
@@ -11,13 +18,6 @@
 		background-repeat: repeat-x;
 	}
 
-	position: relative;
-	width: 100%;
-	height: $segment-storyboard-thumbnail-height;
-	border-radius: 4px;
-	overflow: hidden;
-	cursor: default;
-
 	&.segment-storyboard__part__thumbnail--placeholder {
 		background: lighten($segment-background-color, 10%);
 	}
@@ -118,6 +118,9 @@
 			margin-right: 0.2em;
 
 			&--flash {
+				/* @keyframes duration | easing-function | delay | iteration-count | direction | fill-mode | play-state | name */
+				animation: 0.3s linear 0s infinite normal forwards segment-storyboard__thumbnail__countdown-icon--flash;
+
 				@keyframes segment-storyboard__thumbnail__countdown-icon--flash {
 					0% {
 						opacity: 0;
@@ -132,8 +135,6 @@
 						opacity: 1;
 					}
 				}
-				/* @keyframes duration | easing-function | delay | iteration-count | direction | fill-mode | play-state | name */
-				animation: 0.3s linear 0s infinite normal forwards segment-storyboard__thumbnail__countdown-icon--flash;
 			}
 
 			&:last-child {
diff --git a/packages/webui/src/client/ui/Status/media-status/MediaStatusList.scss b/packages/webui/src/client/ui/Status/media-status/MediaStatusList.scss
index 2bdbf3a60d0..0d9712c1a93 100644
--- a/packages/webui/src/client/ui/Status/media-status/MediaStatusList.scss
+++ b/packages/webui/src/client/ui/Status/media-status/MediaStatusList.scss
@@ -17,17 +17,17 @@
 	margin-top: 2em;
 
 	.media-status-table-search__search-input {
-		&::placeholder {
-			color: #333;
-			font-style: italic;
-		}
-
 		border: none;
 		border-radius: 1em;
 		width: 15em;
 		padding: 5px 2em 5px 0.5em;
 
 		background: #f5f5f5;
+
+		&::placeholder {
+			color: #333;
+			font-style: italic;
+		}
 	}
 	.media-status-table-search__clear-search-input {
 		position: absolute;