@media (prefers-reduced-motion: reduce) {
	#liveblog-update-bar:not([hidden]) {
		animation: none;
	}
}

/* Your base styles */
#liveblog-update-bar {
	position: fixed;
	width: max-content;
	bottom: 1rem;
	left: 1rem;
	border-radius: 6px;
	background-color: #fff;
	font-family: inherit;
	font-size: 14px;
	font-weight: bold;
	top: auto;
	padding: 12px;
	gap: 12px;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-around;
	color: black;
	box-shadow: rgba(0, 0, 0, 0.05) 0 6px 24px 0, rgba(0, 0, 0, 0.08) 0 0 0 1px;
	border: 1px solid rgba(32, 120, 164, 0.55);
	outline: 0.25em solid rgba(32, 120, 164, 0);
	outline-offset: 6px;
	transition-duration: 250ms;
	transition-property: outline-offset, outline-color;
}

#liveblog-update-bar[hidden] { display: none !important; }

#liveblog-update-bar:focus,
#liveblog-update-bar:focus-within {
	outline: 0.25em solid rgba(32, 120, 164, 0.25);
	outline-offset: 0;
	border: 1px solid rgba(32, 120, 164, 0.55);
}

#page #liveblog-update-bar {}

#liveblog-update-msg {
	flex: 1;
	font-size: 0.95rem;
	line-height: 1.4;
}

#liveblog-update-bar .liveblog-update-btn {
	border: none;
	margin: 0;
	padding: 0;
	width: auto;
	overflow: visible;
	background: transparent;
	color: inherit;
	font: inherit;
	line-height: normal;
	-webkit-font-smoothing: inherit;
	-moz-osx-font-smoothing: inherit;
	-webkit-appearance: none;

	cursor: pointer;
	padding: 8px 12px;
	border-radius: 4px;
	background-color: #2078a4;
	color: #fff;
	transition-duration: 150ms;
	transition-property: background-color;
}

#liveblog-update-bar .liveblog-update-btn:hover,
#liveblog-update-bar .liveblog-update-btn:focus {
	background-color: #196084;
	outline: none;
}

@keyframes fadeInUpBigDesktop {
	from {
		opacity: 0;
		transform: translate3d(0, 80px, 0);
	}
	to {
		opacity: 1;
		transform: translate3d(0, 0, 0);
	}
}

@keyframes fadeInUpBigMobile {
	from {
		opacity: 0;
		transform: translate3d(0, 80px, 0) translateX(-50%);
	}
	to {
		opacity: 1;
		transform: translate3d(0, 0, 0) translateX(-50%);
	}
}

#liveblog-update-bar:not([hidden]) {
	animation: fadeInUpBigDesktop 400ms cubic-bezier(.2,.7,.2,1) both;
	will-change: transform, opacity;
}

@media (max-width: 767px) {
	#liveblog-update-bar {
		left: 50%;
		transform: translateX(-50%);
	}
	#liveblog-update-bar:not([hidden]) {
		animation: fadeInUpBigMobile 400ms cubic-bezier(.2,.7,.2,1) both;
	}
}