diff --git a/assets/css/login.css b/assets/css/login.css
index 5ad87a8..4743224 100644
--- a/assets/css/login.css
+++ b/assets/css/login.css
@@ -143,16 +143,33 @@ body.m365-button-only .m365-login--above {
 	background: transparent;
 }
 
-.m365-login--form .m365-login__divider span,
-.m365-login--shortcode .m365-login__divider span {
-	background: transparent;
-}
-
+/* On unknown backgrounds the divider uses flex lines instead of an absolute line behind the text. */
 .m365-login--form .m365-login__divider,
 .m365-login--shortcode .m365-login__divider {
+	display: flex;
+	align-items: center;
+	gap: 12px;
 	margin: 0 0 16px;
 }
 
+.m365-login--form .m365-login__divider::before,
+.m365-login--shortcode .m365-login__divider::before,
+.m365-login--form .m365-login__divider::after,
+.m365-login--shortcode .m365-login__divider::after {
+	content: "";
+	position: static;
+	flex: 1 1 auto;
+	height: 1px;
+	background: #dcdcde;
+}
+
+.m365-login--form .m365-login__divider span,
+.m365-login--shortcode .m365-login__divider span {
+	position: static;
+	padding: 0;
+	background: transparent;
+}
+
 .m365-login__notice {
 	box-sizing: border-box;
 	margin: 0 0 16px;