:root {
	--item-timeline--boxShadow: 0 0 0 4px rgb( var(--theme-page_background) );
}


html[dir="ltr"] .ipsStream.ipsStream_withTimeline  {
	border-left: 5px solid rgba( var(--theme-timeline_color), 0.1 );
	margin-left: 20px;
}
html[dir="rtl"] .ipsStream.ipsStream_withTimeline  {
	border-right: 5px solid rgba( var(--theme-timeline_color), 0.1 );
	margin-right: 20px;
}

.ipsStreamItem {
	margin-top: 10px;
	margin-bottom: 10px;
	position: relative;
}

	.ipsStreamItem.ipsStreamItem_contentBlock {
		padding: var(--sp-5);
		border-radius: var(--radius-1);
	}

		.ipsStreamItem_contentBlock:not( .ipsBox ) {
			box-shadow: var(--box--boxShadow);
		}

		.ipsStreamItem.ipsStreamItem_contentBlock.ipsModerated{
			border-color: rgb( var(--theme-moderated_text_light) );
		}

	.ipsStreamItem.ipsStreamItem_actionBlock {
		padding-top: 4px;
		padding-bottom: 4px;
	}

		.ipsStreamItem.ipsStreamItem_actionBlock time {
			white-space: nowrap;
		}
		
	html[dir="ltr"] .ipsStreamItem.ipsStreamItem_contentBlock.ipsStreamItem_active {
		border-right: 2px solid rgb( var(--theme-text_color) );
	}
	html[dir="rtl"] .ipsStreamItem.ipsStreamItem_contentBlock.ipsStreamItem_active {
		border-left: 2px solid rgb( var(--theme-text_color) );
	}

.ipsStreamItem_snippet {
	margin-top: 15px;
	margin-bottom: 15px;
}

	.ipsStreamItem_snippet .ipsType_richText {
		color: rgb( var(--theme-text_color) );
	}

.ipsStream .ipsStreamItem:first-child {
	margin-top: 0;
}

html[dir="ltr"] .ipsStream_withTimeline .ipsStreamItem {
	margin-left: 28px;
}
html[dir="rtl"] .ipsStream_withTimeline .ipsStreamItem {
	margin-right: 28px;
}

.ipsStreamItem_title {
	color: rgb( var(--theme-text_dark) );
	font-size: {fontsize="x_large"};
	font-weight: 400;
	line-height: 1.2;
}

	.ipsStreamItem_titleSmall {
		font-weight: 400;
		font-size: {fontsize="base"};
	}

.ipsStreamItem_member .ipsStreamItem_title,
.ipsStreamItem_unread .ipsStreamItem_title,
.ipsStreamItem_unread .ipsStreamItem_titleSmall {
	font-weight: bold;
}

.ipsStreamItem_status {
	font-size: {fontsize="medium"};
}

html[dir="ltr"] .ipsStreamItem_snippet,
html[dir="ltr"] .ipsStreamItem_meta {
	margin-left: 55px;
}
html[dir="rtl"] .ipsStreamItem_snippet,
html[dir="rtl"] .ipsStreamItem_meta {
	margin-right: 55px;
}

html[dir="ltr"] .ipsStreamItem_loadMore {
	margin-left: 28px;
	margin-top: 15px;
}
html[dir="rtl"] .ipsStreamItem_loadMore {
	margin-right: 28px;
	margin-top: 15px;
}

.ipsStreamItem_bar hr.ipsHr {
	border-color: rgb( var(--theme-timeline_color) );
	border-top-width: 4px;
}

html[dir="ltr"] .ipsStreamItem_bar hr.ipsHr {
	margin-left: 28px;
}
html[dir="rtl"] .ipsStreamItem_bar hr.ipsHr {
	margin-right: 28px;
}

/* The little pointer on the box */
.ipsStream_withTimeline .ipsStreamItem.ipsStreamItem_contentBlock:before,
.ipsStream_withTimeline .ipsStreamItem.ipsStreamItem_contentBlock:after {
	content: '';
	width: 0;
	height: 0;
	border-style: solid;
	border-color: transparent;
	position: absolute;
	pointer-events: none;
}

.ipsStream_withTimeline .ipsStreamItem.ipsStreamItem_contentBlock:before {
	border-width: 9px;
	top: 11px;
	z-index: 100;
}
	
	html[dir="ltr"] .ipsStream_withTimeline .ipsStreamItem.ipsStreamItem_contentBlock:before {
		right: 100%;
	}
	html[dir="rtl"] .ipsStream_withTimeline .ipsStreamItem.ipsStreamItem_contentBlock:before {
		left: 100%;
	}

.ipsStream_withTimeline .ipsStreamItem_contentBlock:after {
	border-width: 8px;
	top: 12px;
	z-index: 200;
}
	
	html[dir="ltr"] .ipsStream_withTimeline .ipsStreamItem_contentBlock:after {
		right: 100%;
		border-right-color: rgb( var(--theme-area_background_reset) );
	}
	html[dir="rtl"] .ipsStream_withTimeline .ipsStreamItem_contentBlock:after {
		left: 100%;
		border-left-color: rgb( var(--theme-area_background_reset) );
	}

	html[dir="ltr"] .ipsStream_withTimeline .ipsStreamItem_contentBlock.ipsModerated:after {
		border-right-color: rgb( var(--theme-moderated_light) );
	}
	html[dir="rtl"] .ipsStream_withTimeline .ipsStreamItem_contentBlock.ipsModerated:after {
		border-left-color: rgb( var(--theme-moderated_light) );
	}

/* The circle on the timeline */
.ipsStream_withTimeline .ipsStreamItem_container:before {
	content: '';
	box-sizing: border-box;
	display: block;
	position: absolute;	
}

/* Comment items */
.ipsStream_comment {
	background: rgb( var(--theme-area_background_light) );
	border-color: rgb( var(--theme-area_background_light) );
	position: relative;
	border-radius: 3px;
}
	
	html[dir="ltr"] .ipsStream_comment {
		margin-left: 30px;
	}
	html[dir="rtl"] .ipsStream_comment {
		margin-right: 30px;
	}

	.ipsStream_comment:before {
		content: '';
		display: block;
		width: 0;
		height: 0;
		position: absolute;
		top: 15px;
		border: 10px solid transparent;
	}

		html[dir="ltr"] .ipsStream_comment:before {
			right: 100%;
			border-right-color: inherit;
		}
		html[dir="rtl"] .ipsStream_comment:before {
			left: 100%;
			border-left-color: inherit;
		}

/* ACTIONS */
/* e.g. follows, joins etc. */
.ipsStreamItem_actionBlock {
	font-size: {fontsize="small"};
}

html[dir] .ipsStream_withTimeline .ipsStreamItem.ipsStreamItem_actionBlock:after {
	content: '';
	width: 11px;
	height: 11px;
	border-radius: 11px;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	background: rgb( var(--theme-timeline_color) );
	box-shadow: var(--item-timeline--boxShadow);
}
html[dir="ltr"] .ipsStream_withTimeline .ipsStreamItem.ipsStreamItem_actionBlock:after {
	left: -36px;
}
html[dir="rtl"] .ipsStream_withTimeline .ipsStreamItem.ipsStreamItem_actionBlock:after {
	right: -36px;
}

/* TIMES */
.ipsStreamItem_time {
	display: inline-block;
	border-radius: 20px;
	background: rgb( var(--theme-timeline_color) );
	color: #fff;
	line-height: {fontsize="2x_large"};
	font-size: {fontsize="x_small"};
	padding: 0 20px;
	box-shadow: var(--item-timeline--boxShadow);
}

	html[dir="ltr"] .ipsStream_withTimeline .ipsStreamItem_time {
		margin-left: -20px;
	}
	html[dir="rtl"] .ipsStream_withTimeline .ipsStreamItem_time {
		margin-right: -20px;
	}

	.ipsStreamItem.ipsStreamItem_condensed ~ .ipsStreamItem_time {
		margin-top: 7px;
		margin-bottom: 7px;
	}

	.ipsStream .ipsStreamItem_time:first-child {
		margin-bottom: 7px;
	}

/* TERMINATOR (will be right back) */
.ipsStreamItem_terminator {
	width: 13px;
	height: 13px;
	border-radius: 13px;
	background: rgb( var(--theme-timeline_color) );
}

	html[dir="ltr"] .ipsStream_withTimeline .ipsStreamItem_terminator {
		margin-left: -8px;
	}
	html[dir="rtl"] .ipsStream_withTimeline .ipsStreamItem_terminator {
		margin-right: -8px;
	}

/* CONTENT TYPE */
.ipsStream .ipsStreamItem_contentType {
	position: absolute;
	display: block;
	width: 32px;
	height: 32px;
	border-radius: 32px;
	line-height: 30px;
	font-size: 13px;
	text-align: center;
	background: rgb( var(--theme-timeline_color) );
	z-index: 500;
	box-shadow: var(--item-timeline--boxShadow);
	color: #fff;
}

	.ipsBox .ipsStream .ipsStreamItem_contentType{
		box-shadow: rgb( var(--theme-area_background_reset) ) 0px 0px 0px 2px;
	}

	.ipsStreamItem.ipsModerated .ipsStreamItem_contentType {
		background: rgb( var(--theme-moderated_text) );
	}

	html[dir="ltr"] .ipsStream.ipsStream_withTimeline .ipsStreamItem_contentType {
		left: -47px;
		top: 5px;
	}
	html[dir="ltr"] .ipsStream:not( .ipsStream_withTimeline ) .ipsStreamItem_contentType {
		right: var(--sp-4);
		top: var(--sp-4);
	}
	html[dir="rtl"] .ipsStream.ipsStream_withTimeline .ipsStreamItem_contentType {
		right: -47px;
		top: 5px;
	}
	html[dir="rtl"] .ipsStream:not( .ipsStream_withTimeline ) .ipsStreamItem_contentType {
		left: var(--sp-4);
		top: var(--sp-4);
	}

/* SNIPPET STYLES */
.ipsStream_snippetInfo {
	border-style: solid;
	border-color: rgba( var(--theme-text_dark), 0.1 );
	padding-left: 15px;
}

	html[dir="ltr"] .ipsStream_snippetInfo {
		border-width: 0 0 0 1px;
	}
	html[dir="rtl"] .ipsStream_snippetInfo {
		border-width: 0 1px 0 0;
	}

/* EXPANDED VIEW */
html[dir="ltr"] .ipsStreamItem.ipsStreamItem_actionBlock.ipsStreamItem_expanded {
	margin-left: 28px;
}
html[dir="rtl"] .ipsStreamItem.ipsStreamItem_actionBlock.ipsStreamItem_expanded {
	margin-right: 28px;
}

/* CONDENSED VIEW */
.ipsStreamItem_condensed .ipsStreamItem_titleSmall {
	font-size: {fontsize="medium"};
}

.ipsStreamItem_condensed.ipsStreamItem {
	margin-top: 5px;
	margin-bottom: 5px;
}

.ipsStreamItem_condensed.ipsStreamItem.ipsStreamItem_contentBlock {
	padding: var(--sp-4);
	line-height: 1.6;
}

html[dir="ltr"] .ipsStreamItem.ipsStreamItem_actionBlock.ipsStreamItem_condensed {
	padding-left: 0;
}
html[dir="rtl"] .ipsStreamItem.ipsStreamItem_actionBlock.ipsStreamItem_condensed {
	padding-right: 0;
}

.ipsStreamItem_condensed .ipsUserPhoto_tiny {
	width: 34px;
	height: 34px;
}

html[dir="ltr"] .ipsStreamItem_condensed .ipsPhotoPanel_small > div {
	margin-left: 85px;
}
html[dir="rtl"] .ipsStreamItem_condensed .ipsPhotoPanel_small > div {
	margin-right: 85px;
}

html[dir="ltr"] .ipsStreamItem_condensed .ipsPhotoPanel_mini > div {
	margin-left: 45px;
	margin-right: 200px;
}
html[dir="rtl"] .ipsStreamItem_condensed .ipsPhotoPanel_mini > div {
	margin-right: 45px;
	margin-left: 200px;
}

.ipsStreamItem_condensed .ipsCalendarDate {
	width: 75px;
}

.ipsStreamItem_condensed .ipsStreamItem_status {
	font-size: {fontsize="small"};
}

.ipsStream_withTimeline .ipsStreamItem.ipsStreamItem_condensed.ipsStreamItem_contentBlock:before,
.ipsStream_withTimeline .ipsStreamItem.ipsStreamItem_condensed.ipsStreamItem_contentBlock:after,
html[dir] .ipsStream.ipsStream_withTimeline .ipsStreamItem.ipsStreamItem_condensed .ipsStreamItem_contentType {
	top: 50%;
	transform: translateY(-50%);
}

.ipsStreamItem.ipsStreamItem_condensed .ipsStreamItem_stats {
	width: 200px;	
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
}

	html[dir="ltr"] .ipsStreamItem.ipsStreamItem_condensed .ipsStreamItem_stats {
		border-left: 1px solid rgba( var(--theme-text_light), 0.2 );
		padding-left: 15px;
		right: 0;
	}
	html[dir="rtl"] .ipsStreamItem.ipsStreamItem_condensed .ipsStreamItem_stats {
		border-right: 1px solid rgba( var(--theme-text_light), 0.2 );
		padding-right: 15px;
		left: 0;
	}

.ipsStreamItem.ipsStreamItem_condensed .ipsStreamItem_stats time,
.ipsStreamItem.ipsStreamItem_condensed.ipsStreamItem_actionBlock time {
	font-size: 0px;
	line-height: 1;
}

.ipsStreamItem.ipsStreamItem_condensed .ipsStreamItem_stats time:after,
.ipsStreamItem.ipsStreamItem_condensed.ipsStreamItem_actionBlock time:after {
	content: attr(data-short);
	font-size: {fontsize="small"};
	line-height: inherit;
}


/* Stream Widget */
.cWidgetStream > *{
	padding: var(--sp-3) 0 var(--sp-5);
}

.cWidgetStream__icon{
	position: relative;
}

	.cWidgetStream__icon .ipsUserPhoto{
		border: 2px solid rgb( var(--theme-area_background_reset) );
	}

	.cWidgetStreamIcon {
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 12px;
		background: rgb( var(--theme-timeline_color) );
		color: #fff;
		border: 2px solid rgb( var(--theme-area_background_reset) );
		border-radius: 50%;
		width: 30px;
		height: 30px;
		position: relative;
	}

		.cWidgetStream[data-orientation="horizontal"] .cWidgetStreamIcon {
			position: absolute;
			top: 44px;
		}

			[dir='ltr'] .cWidgetStream[data-orientation="horizontal"] .cWidgetStreamIcon {
				right: -8px;
			}
			[dir='rtl'] .cWidgetStream[data-orientation="horizontal"] .cWidgetStreamIcon {
				left: -8px;
			}

	.cWidgetStream__icon::before{
		content: '';
		width: 4px;
		background: rgba( var(--theme-timeline_color), 0.1 );
		position: absolute;
		left: 50%;
		margin-left: -2px;
		top: 0;
		bottom: 0;
	}

		.cWidgetStream:first-child .cWidgetStream__icon::before{
			top: calc(var(--sp-3) + 5px);
		}

		.cWidgetStream:last-child .cWidgetStream__icon::before{
			border-radius: 0 0 4px 4px;
		}

	.cWidgetStreamTime{
		margin-top: var(--sp-1);
	}

	/* Small user photo */
	.cWidgetStreamTime .ipsUserPhoto{
		width: 1.4em;
		height: 1.4em;
	}

.cWidgetStreamReaction .ipsReactOverview {
	text-align: left;
}
	
.cWidgetStream[data-orientation="horizontal"] .ipsDataItem_title {
	font-size: {fontsize="large"};
}

.cWidgetStream[data-orientation="vertical"] .ipsDataItem_title {
	font-size: {fontsize="base"};
}


.ipsStreamItem_columns{
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	margin: 0 0 var(--sp-2) calc(var(--sp-5) * -1);
	clear: both; /* Clear floated comments */
}

	.ipsStreamItem_columns > *{
		margin: var(--sp-2) 0 0 var(--sp-5);
		min-width: 0;
	}

	.ipsStreamItem_columns__thumb{
		flex: 0 1 180px;
	}
		.ipsStreamItem_columns__thumb .ipsThumb{
			width: auto;
			height: auto;
			max-width: none;
			max-height: none;
		}

			.ipsStreamItem_columns__thumb .ipsThumb::before{
				content: '';
				display: block;
				padding-top: 100%;
			}

	.ipsStreamItem_columns__content{
		flex: 9999 1 300px;
	}

		.ipsStreamItem_columns__content > *{
			margin-top: 0;
			margin-bottom: 0;
		}
			.ipsStreamItem_columns__content > :not(:last-child){
				margin-bottom: var(--sp-3);
			}