div[class*='-setup-instructions-container'] {
	.header {
		display: flex;
		align-items: center;

		margin: 16px 0;

		img {
			height: 40px;
		}

		h1 {
			font-size: 18px;
			display: flex;
			align-items: center;
			color: #e5e7eb;
			gap: 16px;
			margin: 12px;
		}
	}
}

.form-container {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	width: 100%;
	gap: 16px;
	margin-top: 24px;
}

.source-name {
	width: 80%;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	text-align: center;
	font-size: 12px;
}

.service-name-container {
	width: 100%;
}

.intgeration-page-container {
	background-color: var(--bg-ink-400);
	border-color: var(--bg-slate-500);
}

.intgeration-page-container-text {
	color: var(--bg-vanilla-400);
}

.navigate-integrations-page-btn {
	display: flex;
	align-items: center;
	color: var(--bg-vanilla-100);
	background-color: var(--bg-slate-300);
	box-shadow: none;
	border: none;
}

.dataSourceName {
	color: var(--bg-vanilla-100);
	font-weight: 600;
	cursor: pointer;

	display: flex;
	align-items: center;
	gap: 8px;
}

.lightMode {
	.dataSourceName {
		color: var(--bg-slate-500);
	}
}