#unsupported-browser {
			display: none;
		}

		html.unsupported-browser #unsupported-browser {
			display: flex;
		}

		html.unsupported-browser #app,
		html.unsupported-browser #blazor-error-ui {
			display: none !important;
		}

		.ub-overlay {
			position: fixed;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
			z-index: 99999;
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 16px;
			box-sizing: border-box;
			overflow-y: auto;
			background: #EEEDF6;
			font-family: 'Inter', Arial, Helvetica, sans-serif;
			color: #1B1845;
			-webkit-font-smoothing: antialiased;
		}

		.ub-card {
			width: 100%;
			max-width: 540px;
			margin: auto;
			background: #FFFFFF;
			border-radius: 16px;
			border-top: 5px solid #27235C;
			box-shadow: 0 8px 24px rgba(27, 24, 69, 0.14);
			padding: 28px 28px 24px;
			box-sizing: border-box;
		}

		.ub-logo {
			display: block;
			height: 40px;
			width: auto;
			margin: 0 0 18px;
		}

		.ub-head {
			display: flex;
			align-items: center;
			margin-bottom: 14px;
		}

		.ub-icon {
			flex: 0 0 44px;
			width: 44px;
			height: 44px;
			margin-right: 14px;
			border-radius: 50%;
			background: #FAEEDA;
			color: #BA7517;
			text-align: center;
		}

			.ub-icon svg {
				display: block;
				width: 24px;
				height: 24px;
				margin: 10px auto;
			}

		.ub-card h2 {
			margin: 0;
			font-family: 'Montserrat', 'Inter', Arial, Helvetica, sans-serif;
			font-size: 22px;
			font-weight: 700;
			line-height: 1.2;
			color: #27235C;
		}

		.ub-card p {
			margin: 10px 0;
			font-size: 14px;
			line-height: 1.6;
			color: #4E4A7A;
		}

		.ub-status {
			margin: 0 0 14px;
			padding: 10px 14px;
			border-radius: 8px;
			border-left: 4px solid #BA7517;
			background: #FAEEDA;
			font-size: 13px;
			line-height: 1.5;
			color: #1B1845;
		}

			.ub-status strong {
				color: #8A5610;
			}

		.ub-small {
			font-size: 12px;
			color: #4E4A7A;
		}

		.ub-browsers {
			margin: 14px -4px 4px;
			padding: 0;
			list-style: none;
			font-size: 0; /* removes inline-block whitespace gaps */
		}

			.ub-browsers li {
				display: inline-block;
				width: 50%;
				padding: 4px;
				box-sizing: border-box;
				font-size: 14px;
			}

			.ub-browsers a {
				display: block;
				padding: 10px 12px;
				border: 1px solid #B8B6CC;
				border-radius: 8px;
				background: #F5F4FA;
				color: #27235C;
				font-weight: 600;
				text-align: center;
				text-decoration: none;
			}

				.ub-browsers a:hover,
				.ub-browsers a:focus {
					border-color: #27235C;
					background: #EEEDF6;
				}

		.ub-ie {
			margin-top: 12px;
			font-size: 12px;
			color: #4E4A7A;
		}

		.ub-countdown {
			margin: 14px 0 0;
			padding: 8px 12px;
			border-radius: 8px;
			background: #E6F1FB;
			font-size: 13px;
			color: #0D4478;
		}

			.ub-countdown:empty {
				display: none;
			}

		.ub-actions {
			margin-top: 18px;
			padding-top: 16px;
			border-top: 1px solid #EEEDF6;
		}

		.ub-card a.ub-btn {
			display: inline-block;
			margin: 0 10px 8px 0;
			padding: 10px 20px;
			border: 2px solid #27235C;
			border-radius: 8px;
			background: #27235C;
			color: #FFFFFF;
			font-size: 14px;
			font-weight: 600;
			text-decoration: none;
		}

			.ub-card a.ub-btn:hover,
			.ub-card a.ub-btn:focus {
				background: #3B367A;
				border-color: #3B367A;
			}

		.ub-card a.ub-btn-outline {
			background: #FFFFFF;
			color: #27235C;
		}

			.ub-card a.ub-btn-outline:hover,
			.ub-card a.ub-btn-outline:focus {
				background: #EEEDF6;
				border-color: #27235C;
			}

		@media (max-width: 420px) {
			.ub-card {
				padding: 22px 18px 18px;
			}

			.ub-browsers li {
				width: 100%;
			}

			.ub-card a.ub-btn {
				display: block;
				margin-right: 0;
				text-align: center;
			}
		}