.ck-user-posts {
	/*important there is no formatting associated with the root element. This is provided just to provide a name scope for these classes

*/
}


	.ck-user-posts .poster-left,
	.ck-user-posts .poster-right {
		/*bs:d-flex*/
		display: -ms-flexbox !important;
		display: flex !important;
		/*bs:align-items-start*/
		-ms-flex-align: start !important;
		align-items: flex-start !important;
		/*bs:my-3*/
		margin-top: 0.5rem;
		margin-bottom: 1.5rem;
	}


	.ck-user-posts .poster-image {
		/*need to handle people with long names*/
		max-width: 80px;
		overflow: hidden;
		word-wrap: normal;
		text-align: center;
		/*bs:small*/
		font-size: 80%;
		font-weight: 400;
		/*bs:flex-shrink-0*/
		-ms-flex-negative: 0 !important;
		flex-shrink: 0 !important;
	}

		.ck-user-posts .poster-image img {
			border-radius: 0.3rem;
			width: 80px;
			min-width: 80px;
			height: auto;
			outline: 0;
			border: 0;
		}

/*sm and down*/
@media (max-width: 575.98px) { 
	.ck-user-posts .poster-image img {
		width: 40px;
		min-width: 40px;
	}
}

	/*no padding inside body. Let pages define as necessary*/
	.ck-user-posts .post-body {
		position: relative;
		border: 1px solid #f1f5fc;
		/*box-shadow: 0 1px 1px rgba(0,0,0,.05);
				-moz-box-shadow: 0 1px 1px rgba(0,0,0,.05);
				-webkit-box-shadow: 0 1px 1px rgba(0,0,0,.05);*/
		border-radius: 0.4rem;
		/*bs:p-4*/
		padding: 1.5rem;
		/*bs:flex-grow-1*/
		-ms-flex-positive: 1 !important;
		flex-grow: 1 !important;
	}

		.ck-user-posts .post-body small {
			color: rgba(0,0,0,0.35) !important;
		}


	.ck-user-posts .poster-left .post-body {
		margin-left: 1rem;
		background-color: #fff;
		/*margin-right: 50px;*/
	}

		.ck-user-posts .poster-left .post-body:before {
			position: absolute;
			top: 20px;
			left: -8px;
			display: inline-block;
			background: #fff;
			width: 16px;
			height: 16px;
			border-top: 1px solid #f1f5fc;
			border-left: 1px solid #f1f5fc;
			content: '';
			transform: rotate(-45deg);
			-webkit-transform: rotate(-45deg);
			-moz-transform: rotate(-45deg);
			-ms-transform: rotate(-45deg);
			-o-transform: rotate(-45deg);
		}
		/*bs:border-secondary useful when post is on a white background*/
		.ck-user-posts .poster-left .post-body.border-secondary:before {
			border-top-color: var(--secondary);
			border-left-color: var(--secondary);
		}

	.ck-user-posts .poster-right .post-body {
		margin-right: 1rem;
		background-color: #fff;
		/*margin-left: 50px;*/
		/*bs:order-1*/
		-ms-flex-order: 1;
		order: 1;
	}

		.ck-user-posts .poster-right .post-body:before {
			position: absolute;
			top: 20px;
			right: -8px;
			display: inline-block;
			background: #fff;
			width: 16px;
			height: 16px;
			border-top: 1px solid #f1f5fc;
			border-right: 1px solid #f1f5fc;
			content: '';
			transform: rotate(45deg);
			-webkit-transform: rotate(45deg);
			-moz-transform: rotate(45deg);
			-ms-transform: rotate(45deg);
			-o-transform: rotate(45deg);
		}
		/*bs:border-secondary useful when post is on a white background*/
		.ck-user-posts .poster-right .post-body.border-secondary:before {
			border-top-color: var(--secondary);
			border-right-color: var(--secondary);
		}

	.ck-user-posts .poster-right .poster-image {
		/*bs:order-2 */
		-ms-flex-order: 2;
		order: 2;
	}

	/*for situations where we use the post visual (like in a reply window) and not as part of an indented chat style display*/
	.ck-user-posts .post-alone textarea {
		border: 0;
	}

	.ck-user-posts .poster-left.post-alone .post-body {
		margin-right: 0;
	}

	.ck-user-posts .poster-right.post-alone .post-body {
		margin-left: 0;
	}


	@media (min-width: 768px) {
		/*on wider screens we can have the full experience of chat bubbles indented on each other*/
		.ck-user-posts:not(.floating) .poster-right:not(.post-alone) .post-body {
			margin-left: 140px;
		}

		.ck-user-posts:not(.floating) .poster-left:not(.post-alone) .post-body {
			margin-right: 140px;
		}
	}



	.ck-user-posts .unread .post-body {
		background-color: #fdfbee;
		border-color: #dddbce;
	}

		.ck-user-posts .unread .post-body:before {
			border-color: #dddbce;
			background: #fdfbee;
		}

	.ck-user-posts .comment-placeholder {
		font-style: italic;
		padding: .25rem 1rem;
		border-radius: var(--bs-border-radius-pill) !important;
		color: rgba(0,0,0,0.25);
		background-color: rgba(var(--bs-light-rgb),1) !important;
		border: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
	}

	.ck-user-posts .cover {
		position: absolute;
		width: 100%;
		height: 100%;
		background: rgba(255,255,255,0.7);
		top: 0;
		left: 0;
		z-index: 1041;
	}







	#conversations_floating {
		position: fixed;
		bottom: 0;
		right: 50px; /*allows viewing on phones*/
		z-index: 1040;
	}

	.ck-user-posts.floating {
		width: 330px;
		height: 500px;
		display: block;
		margin-left: 1rem;
		position: relative;
	}

		.ck-user-posts.floating .post-cluster {
			margin-bottom: 1.5rem;
		}

		.ck-user-posts.floating .card-body {
			max-height: 375px;
			overflow-y: scroll;
			font-size: 0.875rem;
		}

			.ck-user-posts.floating .card-body small {
				font-size: smaller;
			}


		.ck-user-posts.floating .poster-left,
		.ck-user-posts.floating .poster-right {
			margin-bottom: 0.15rem;
			margin-top: 0.15rem;
		}

		.ck-user-posts.floating .post-body {
			padding: 0.5rem;
		}


		.ck-user-posts.floating .poster-image {
			max-width: 30px;
			margin-top: 1rem;
		}

			.ck-user-posts.floating .poster-image img {
				border-radius: 50%;
				width: 30px;
				min-width: 30px;
			}

		.ck-user-posts.floating .poster-right .poster-image { /*no need to see yourself all the time*/
			display: none;
		}

		.ck-user-posts.floating .poster-right .post-body {
			margin-left: 1.75rem;
			margin-right: 0.75rem;
			color: #fff !important;
			background-color: rgba(var(--bs-primary-rgb),var(--bs-bg-opacity,1)) !important;
			border-radius: 1rem 0.25rem 0.25rem 1rem;
		}

		.ck-user-posts.floating .post-body:before {
			display: none;
			/*border-top: 1px solid var(--bs-primary);
			border-right: 1px solid var(--bs-primary);
			background: var(--bs-primary);*/
		}

		.ck-user-posts.floating .poster-right .post-body small {
			color: rgba(255,255,255,0.5) !important;
		}

		.ck-user-posts.floating .poster-left .post-body {
			margin-right: 1.75rem;
			margin-left: 0.75rem;
			background-color: #F0F0F0;
			border-radius: 0.25rem 1rem 1rem 0.25rem;
		}




		.ck-user-posts.floating .post-cluster > div:first-child .poster-left .post-body {
			border-top-left-radius: 1rem;
		}