#sulo-stream-settings {
	max-width: 100rem;
	margin: 0 auto;
	.callout label {
		text-align: left;
	}
	.toggle-button-small {
		display: none;
	}

	.sl-tooltip-text {
		// width: 10rem;
	}
	#sulo-video-container {
		width: 100%;
	}
	.chat-menu {
		background: $white;
		justify-content: flex-end;
		border-bottom: $global-border;
	}

	.section-title {
		margin-bottom: 0.5rem;
		> * {
			margin-bottom: 0;
		}
		h3 {
			// margin-bottom: 0.5rem;
			.label {
				font-size: 80%;
				text-transform: uppercase;
			}
		}
	}
	>.row .column {
		display: flex;
		flex-direction: column;
	}
	.column .dashboard-section {
		display: flex;
		flex-direction: column;
		flex: 1 0 auto;
		.callout.flex {
			flex: 1 0 auto;
			display: flex;
		}
	}

	.setup-checklist {
		li {
			margin-bottom: 1rem;
			p {
				margin-bottom: 0.5rem;
			}
			a {
				color: map-get($foundation-palette, action);
				&:hover {
					text-decoration: underline;
				}
			}
		}
	}
	.stream-state-container {
		display: flex;
		align-items: center;
		// margin-bottom: $global-margin;
		> h3 {
			margin: 0;
		}
		> a {
			padding: 0 0.5rem;
			color: $dark-gray;
			&:hover {
				color: $body-font-color;
			}
		}
	}

	.stream-status {
		display: flex;
		justify-content: space-between;
		align-items: center;
		span {
			font-size: 1rem;
			@include breakpoint(medium) {
				font-size: 1.2rem;
			}
		}
		span.status {
			text-transform: uppercase;
		}
		i.status {
			font-size: 1.1rem;
			@include breakpoint(medium) {
				font-size: 1.5rem;
			}
			&.offline {
				color: $medium-gray;
			}
			&.online {
				color: $success-color;
			}
			&.live {
				color: map-get($foundation-palette, highlight);
			}
		}
		.button.hollow {
			margin: 0;
		}
	}
}
