/* POST SECTION */
.posts-section {
	position: relative;
	z-index: 5;
	margin: 0 auto 5rem;
	max-width: 160rem;
}
.posts-section::after {
	content: "";
	clear: both;
	display: table;
}
.posts-section > .inner > div {
	float: left;
}
.posts-section .leftcol {
	padding-right: 2rem;
	width: calc(100% - 34rem);
}
.posts-section .rightcol {
	width: 34rem;
}
.posts-wrapper {
	margin-bottom: 5rem;
}
@media screen and (max-width:1024px) {
	.posts-section > .inner > div {
		float: none;
		width: 100%;
		padding-right: 0;
	}
}

/* POST CARD HEADER */
.posts-header {
	padding: 2rem 2rem 2rem 3rem;
	margin-top: -3rem;
	margin-bottom: 2rem;
	background-color: #fff;
	border: 1px solid #ddd;
	border-radius: 1rem;
	overflow: hidden;
}
.posts-header h2 {
	float: left;
	font-size: 2.4rem;
}
.posts-header .view-all {
	float: right;
}
.btn-likes {
	cursor: pointer;
}
.is-liked {
	color: #007bff;
}

/* OPTIONS */
.options-wrapper {
	position: relative;
	float: right;
}
.options-wrapper .btn-options-toggle {
	display: block;
	margin-top: -1.3rem;
	margin-right: -0.5rem;
	margin-left: 1rem;
	padding: 1rem;
	border: 1px solid #ccc;
	border-radius: 0.5rem;
}
.options-wrapper .btn-options-toggle.open {
	border-bottom-right-radius: 0;
	border-bottom-left-radius: 0;
}
.options-wrapper ul {
	display: none;
	position: absolute;
	top: 2.5rem;
	right: -0.5rem;
	z-index: 300;
	width: 15rem;
	border: 1px solid #ccc;
	border-radius: 0.5rem;
	border-top-right-radius: 0;
}
.options-wrapper ul li a {
	display: block;
	padding: 1rem 1.5rem;
	background-color: #fff;
	border-bottom: 1px solid #ccc;
	font-size: 1.4rem;
}
.options-wrapper ul li:last-child a {
	border-bottom: 0;
}
.options-wrapper ul.open {
	display: block;
}
.btn-edit-post,
.btn-edit-dispute,
.btn-publish-post {
	color: #090;
}
.btn-delete-post,
.btn-delete-dispute,
.btn-unpublish-post {
	color: #c00;
}

/* POST CARD */
.post-card {
	margin-bottom: 2rem;
	padding: 3rem 2rem 3rem 3rem;
	background-color: #fff;
	border: 1px solid #ddd;
	border-radius: 0.8rem;
}
.post-card::after {
	content: "";
	display: table;
	clear: both;
}
.post-media {
	float: left;
	margin-right: 2rem;
}
.post-media img {
	width: 12rem;
	height: 12rem;
	object-fit: cover;
	border-radius: 6px;
}
.post-details {
	margin-left: 14rem;
}
.scam-page .post-details {
	margin-left: 0;
}
.post-details::after {
	content: '';
	clear: both;
	display: table;
}
.post-title {
	margin-bottom: 1rem;
	font-size: 1.8rem;
	font-weight: 600;
	color: #222;
}
.scam-page .post-title {
	font-size: 3rem;
}
.post-date {
	float: right;
	font-size: 1.4rem;
	color: #666;
}
.post-date i {
	margin-right: 0.3rem;
}
.post-category {
	margin-bottom: 0.8rem;
	overflow: hidden;
}
.post-category li {
	float: left;
	margin-right: 0.5rem;
	padding: 0.5rem 1rem;
	border-radius: 0.75rem;
	background-color: #ddd;
	color: #333;
	font-size: 0.9rem;
	font-weight: 600;
	text-transform: uppercase;
}
.post-user {
	margin-bottom: 1.6rem;
	overflow: hidden;
}
.read-more {
	color: #339;
}
.user-avatar {
	position: relative;
	float: left;
	margin-right: 0.8rem;
	width: 4rem;
	height: 4rem;
	border-radius: 50%;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
}
.user-avatar span {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-size: 1.4rem;
	font-weight: 600;
	color: #fff;
}
.avatar-blue {
	background-color: #4e6bff;
}
.avatar-yellow {
	background-color: #ffaa00;
}
.avatar-green {
	background-color: #00b359;
}
.user-name {
	display: inline-block;
	margin-top: 1.2rem;
	font-size: 1.4rem;
	font-weight: 600;
}
.post-meta {
	margin-bottom: 1.6rem;
	font-size: 1.4rem;
}
.post-meta strong {
	font-size: 1rem;
	font-weight: 600;
	color: #999;
}
.post-meta-scammer-name {
	margin-bottom: 0.4rem;
}
.post-meta-scammer-details {
	margin-bottom: 2rem;
	font-size: 1.4rem;
	line-height: 1.3;
}
.post-meta-scammer-details p {
	margin-bottom: 1.5rem;
}
.post-photo-thumbnails {
	overflow: hidden;
}
.post-photo-thumbnails.dispute-photos {
	margin-top: 2rem;
}
.post-photo-thumbnails li {
	position: relative;
	float: left;
	width: 20%;
	padding: 0.5rem;
}
.post-photo-thumbnails li .btn-delete-photo {
	display: block;
	position: absolute;
	top: 0;
	right: 0;
	z-index: 10;
	padding: 1rem;
	font-size: 2rem;
	color: #fff;
	opacity: 0;
	-webkit-transition: all 200ms ease;
	-moz-transition: all 200ms ease;
	-o-transition: all 200ms ease;
	transition: all 200ms ease;
}
.post-photo-thumbnails li .photo-link {
	position: relative;
	z-index: 5;
	display: block;
	-webkit-transition: all 200ms ease;
	-moz-transition: all 200ms ease;
	-o-transition: all 200ms ease;
	transition: all 200ms ease;
}
.post-photo-thumbnails li img {
	width: 100%;
	-webkit-transition: all 200ms ease;
	-moz-transition: all 200ms ease;
	-o-transition: all 200ms ease;
	transition: all 200ms ease;
}
.post-photo-thumbnails li:hover .photo-link {
	background-color: rgba(0,0,0,1);
}
.post-photo-thumbnails li:hover .photo-link img {
	opacity: 0.5;
}
.post-photo-thumbnails li:hover .btn-delete-photo {
	opacity: 1;
}
.post-interactions {
	float: left;
	margin-top: 0.5rem;
	margin-bottom: 1rem;
	font-size: 1.4rem;
}
.post-interactions a {
	float: left;
	margin-right: 2rem;
	cursor: pointer;
}
.post-interactions p {
	float: left;
	margin-right: 2rem;
}
.post-interactions p i {
	margin-right: 0.2rem;
}
.btn-add-dispute {
	float: right !important;
	margin: 0;
	padding: 0.5rem 1rem;
	cursor: pointer;
	border: 1px solid #c00;
	border-radius: 0.5rem;
	font-size: 1.4rem;
}
.btn-load-more-posts i {
	font-size: 2rem;
}
@media screen and (max-width:520px) {
	.post-media {
		float: none;
		margin-bottom: 2rem;
	}
	.post-interactions {
		clear: both;
		float: none;
		width: 100%;
	}
}

/* POST CARD HEADER */
.posts-header {
	padding: 2rem 2rem 2rem 3rem;
	margin-top: -3rem;
	margin-bottom: 2rem;
	background-color: #fff;
	border: 1px solid #ddd;
	border-radius: 1rem;
	overflow: hidden;
}
.posts-header h2 {
	float: left;
	font-size: 2.4rem;
}
.posts-header .view-all {
	float: right;
}
.btn-view-details {
	float: right;
}
.btn-view-details {
	float: right;
}
.btn-load-more {
	display: block;
	margin: 0 auto;
	padding: 1rem 2rem;
	width: 16rem;
	background-color: #eef;
	border: 1px solid #ccf;
	border-radius: 5px;
	font-size: 1.4rem;
	color: #339;
}
.btn-load-more i {
	font-size: 2rem;
}
@media screen and (max-width:520px) {
	.btn-view-details {
		clear: both;
		float: left;
		margin-top: 2rem;
	}
}

/* PUBLISH WARNING */
.publish-warning {
	margin-bottom: 3rem;
	padding: 2rem 2.5rem;
	border-radius: 1rem;
	background-color: #c00;
	border: 1px solid #900;
	font-size: 2rem;
	font-weight: 600;
	color: #fff;
}
.publish-warning i {
	margin-right: 1rem;
}

/* DISPUTE */
.dispute-wrapper {
	clear: both;
	float: left;
	width: 100%;
	margin-top: 2rem;
	padding: 2rem;
	border: 1px solid #ccc;
	border-radius: 1rem;
}
.dispute-wrapper h3 {
	float: left;
	margin-top: -3.2rem;
	padding: 0.5rem 1rem;
	background-color: #fff;
	font-weight: 600;
}
.dispute-date {
	float: right;
	font-size: 1.4rem;
	color: #666;
}
.dispute-date i {
	margin-right: 0.3rem;
}
.dispute-wrapper > p {
	margin-bottom: 0.5rem;
}
.dispute-wrapper > p strong {
	font-size: 1rem;
	font-weight: 600;
	color: #999;
}
.dispute-message {
	margin-top: 2rem;
}
.dispute-message > p {
	margin-bottom: 2rem;
}
.dispute-message > p:last-child {
	margin-bottom: 0;
}

/* COMMENTS SECTION */
.comments-list {
	margin-left: -1rem;
	border-radius: 0 0 1rem 1rem;
}
.comments-section h4 {
	margin: 4rem 0 0;
	padding: 1rem;
	font-weight: 600;
}
.comment-item {
	display: flex;
	margin-bottom: 1rem;
	padding: 1.5rem;
	background-color: rgba(0,0,0,0.025);
	border: 1px solid #e8e8e8;
	border-radius: 1rem;
}
.comment-item .comments-actions {
	display: none;
}
.comment-item .btn-reply {
	cursor: pointer;
}
.comment-avatar {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	margin-right: 1rem;
	width: 4rem;
	height: 4rem;
	background-color: #007bff;
	border-radius: 50%;
	font-weight: 600;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
}
.comment-content {
	flex: 1;
}
.comment-header {
	margin-bottom: 0.6rem;
}
.comment-author-options {
	float: right;
}
.comment-author-options li {
	float: right;
	margin-left: 1rem;
}
.comment-author-options .btn-save-comment,
.comment-author-options .btn-cancel-comment {
	display: none;
}
.comment-author {
	display: inline-block;
	margin-top: 1.2rem;
	margin-right: 1rem;
	font-weight: 600;
}
.comment-date {
	display: inline-block;
	margin-top: 1rem;
	font-size: 1.2rem;
	color: #666;
}
.comment-body {
	margin-top: 2rem;
}
.comment-body p.open-edit {
	padding: 1rem;
	border: 1px solid #ccc;
	border-radius: 0.5rem;
	background-color: #fff;
}
.comments-actions {
	margin-top: 2rem;
}
.comment-input {
	margin-bottom: 0.5rem;
	padding: 1rem;
	width: 100%;
	min-height: 8rem;
	border: 1px solid #ddd;
	font-family: inherit;
	resize: none;
}
.btn-post-comment {
	float: right;
	padding: 1rem 2rem;
	cursor: pointer;
	background-color: #007bff;
	border: none;
	border-radius: 0.4rem;
	color: #fff;
}
.comment-options {
	margin-top: 2rem;
	overflow: hidden;
}
.comment-options li {
	float: left;
	margin-right: 1rem;
	font-size: 1.4rem;
}
.comments-wrapper {
	margin-top: 2rem;
	margin-left: -2rem;
}


.btn-load-more-posts {
    display: block;
    margin: 0 auto;
    padding: 1rem 2rem;
    width: 16rem;
    cursor: pointer;
    background-color: #eef;
    border: 1px solid #ccf;
    border-radius: 5px;
    font-size: 1.4rem;
    color: #339;
}