.tutorial .sidebar-offset {
	margin-left: 0px;
	width: 100%;

	@media (min-width: 960px) {
		margin-left: calc((0.5rem * #{$lineHeight}) * 21); //252px;
		width: calc(100% - ((0.5rem * #{$lineHeight}) * 21));
	}
}

.tutorial .sidebar {
	top: 0;

	@media (min-width: 960px) {
		width: calc((0.5rem * #{$lineHeight}) * 21);
	}

	.sidebar-list {
		padding: calc(1rem * #{$lineHeight}) calc(0.5rem * #{$lineHeight});
	}

	.sidebar-item {
		display: flex;
		justify-content: flex-start;
		flex-direction: row;
		align-content: center;
		flex-wrap: nowrap;
		align-items: center;
		padding: 0;
		border-radius: 4px;
	}

	.sidebar-link {
		display: flex;
		justify-content: flex-start;
		flex-direction: row;
		flex-wrap: nowrap;
		align-content: center;
		align-items: center;

		padding: calc(0.5rem * #{$lineHeight});
		width: 100%;

		font-family: $font-primary;
		font-weight: 600;
		font-size: 0.8125rem;
		color: rgba($primary, 0.8);

		&.sidebar-link-selected {
			background: rgba($accent, 0.1);
		}

		&.sidebar-link-read {
			color: rgba($primary, 0.8);
		}

		span:not(.tutorial-step) {
			line-height: calc(1rem * #{$lineHeight});
		}
	}


	.tutorial-step {
		font-family: $font-primary;
		font-weight: 600;
		display: block;
		margin-right: calc(0.5rem * #{$lineHeight});
		width: calc(1.5rem * #{$lineHeight});
		height: calc(1.5rem * #{$lineHeight});
		border-radius: 50%;
		box-shadow: 0 2px 8px rgba($primary, 0.12);
		text-align: center;
		line-height: calc(1.5rem * #{$lineHeight});
		background: white;
		font-size: 0.8125rem;
		flex-shrink: 0;
		position: relative;
		z-index: 1;
	}

	.sidebar-link {
		position: relative;
		height: 100%;
	}

	.sidebar-link .before {
		background: rgba($primary, 0.1);
		display: block;
		position: absolute;
		top: 0;
		left: 24px;
		height: 50%;
		width: 4px;

		@media (min-width: #{$min_width}px) and (max-width: #{$max_width}px){
			left: 28px;
		}
		@media (min-width: #{$max_width}px){
			left: 32px;
		}
	}

	.sidebar-link.sidebar-link-read .before,
	.sidebar-link.sidebar-link-selected .before {
		background: $accent;
	}

	.sidebar-item:first-child .sidebar-link .before {
		display: none;
	}

	.sidebar-item .sidebar-link .after {
		background: rgba($primary, 0.1);
		top: 50%;
		display: block;
		height: 50%;
		left: 24px;
		position: absolute;
		width: 4px;

		@media (min-width: #{$min_width}px) and (max-width: #{$max_width}px){
			left: 28px;
		}
		@media (min-width: #{$max_width}px){
			left: 32px;
		}
	}

	.sidebar-link.sidebar-link-read .after {
		background: $accent;
	}

	.sidebar-item:last-child .sidebar-link .after {
		display: none;
	}

	.sidebar-link .section-title {
		font-size: 0.8125rem;
	}

	.sidebar-link.sidebar-link-read .section-title {
		color: rgba($primary, 0.6);
		text-decoration: line-through;
	}

	.sidebar-link.sidebar-link-selected .tutorial-step {
		color: $accent;
		box-shadow: 0 2px 8px rgba($accent, 0.1);
	}
}