.media {
	display: flex;
	align-items: flex-start;
}

.media-body {
	flex: 1;
}

* + .media {
	margin-top: 20px;
}

.media-cloud .media-heading {
	position: relative;
	padding-left: 0.9em;
}

.media-cloud .media-heading:before {
	content: '';
	position: absolute;
	top: 0.25rem;
	left: 0;
	width: 0.55em;
	height: 0.55em;
	border-radius: 50%;
	background-color: #d5d5d5;
}

.media-cloud .media-heading.online:before {
	background-color: #6fbb47;
}

.media-cloud .media-heading.offline:before {
	background-color: #fb6820;
}

.media-cloud .media-body {
	position: relative;
	padding: 0.9375rem;
	background-color: #fff;
	border: 1px solid #d5d5d5;
}

.media-cloud .media-body:before, .media-cloud .media-body:after {
	position: absolute;
	content: '';
	left: -5px;
	top: 13px;
	width: 12px;
	height: 12px;
	background: #fff;
	transform: rotate(45deg);
}

.media-cloud .media-body:before {
	left: -6px;
	border: 1px solid #d5d5d5;
}

.media-cloud .media-body-right-caret:before, .media-cloud .media-body-right-caret:after {
	right: -5px;
	left: auto;
}

.media-cloud .media-body-right-caret:before {
	right: -6px;
}

.media-cloud * + .media-text {
	margin-top: 0.3125rem;
}