Rocket.Chat/client/components/setupWizard/SideBar.css

.SetupWizard__SideBar {
	display: flex;
	overflow: hidden;
	flex: 0 1 350px;
	flex-flow: column nowrap;
}

.SetupWizard__SideBar-header {
	display: flex;

	margin: 2rem 1.625rem;
	align-items: center;
	flex-flow: row wrap;
}

.SetupWizard__SideBar-headerLogo {
	height: 1.5rem;
	margin: 0.25rem 0.375rem;
}

.SetupWizard__SideBar-headerTag {
	margin: 0.25rem 0.375rem;

	padding: 4px 8px;

	white-space: nowrap;

	text-transform: uppercase;

	color: var(--color-white);

	border-radius: 50px;
	background-color: var(--color-dark);

	font-size: 10px;

	line-height: 1rem;
}

.SetupWizard__SideBar-content {
	overflow: auto;
	flex: 1;

	margin: 0 0 1rem;
	padding: 0 2rem;
}

.SetupWizard__SideBar-title {
	margin-bottom: 1rem;

	letter-spacing: 0.03rem;

	color: var(--color-dark);

	font-size: 2rem;

	font-weight: 600;

	line-height: 2.6rem;
}

.SetupWizard__SideBar-text {
	margin-bottom: 3rem;

	color: var(--color-gray);

	font-size: 1rem;

	font-weight: 500;

	line-height: 1.5rem;
}

.SetupWizard__SideBar-step {
	position: relative;

	margin: 0 -0.5rem 2rem;

	color: var(--color-dark-10);

	font-size: 0.875rem;
	font-weight: 500;

	&::before {
		display: inline-flex;

		width: 1.5rem;
		height: 1.5rem;
		margin: 0 0.5rem;

		content: attr(data-number);

		color: var(--color-dark-10);

		border: 1px solid var(--color-dark-10);
		border-radius: 9999px;

		font-size: 0.75rem;
		align-items: center;
		justify-content: center;
	}

	&::after {
		position: absolute;
		bottom: -2rem;
		left: 1.2rem;

		display: block;

		width: 0.0625rem;
		height: 2rem;

		content: '';

		background-color: var(--color-dark-10);
	}

	&:last-child {
		margin-bottom: 0;

		&::after {
			display: none;
		}
	}

	&--active {
		color: var(--rc-color-button-primary);

		&::before {
			color: var(--rc-color-button-primary);
			border-color: var(--rc-color-button-primary);
			background-color: transparent;
		}
	}

	&--past {
		color: var(--rc-color-primary);

		&::before {
			color: var(--rc-color-content);
			border-color: var(--rc-color-button-primary);
			background-color: var(--rc-color-button-primary);
		}

		&::after {
			background-color: var(--rc-color-button-primary);
		}
	}

	.rtl &::after {
		right: 1.2rem;
		left: auto;
	}
}

@media (width <= 760px) {
	.SetupWizard__SideBar {
		flex-basis: auto;
	}

	.SetupWizard__SideBar-content {
		display: none;
	}
}