.forum-threads
{
	display: grid;
	grid-template-columns: 1fr 5rem 10rem 10rem;
	width: 100%;
	max-width: 900px;
	margin: 0 auto;
	background: #fff;
	color: #0c0b0b;
	margin-top: 1rem;
	border-radius: 0.75em;
}
body.thread-open .forum-threads
{
	display: none;
}

.forum-posts
{
	max-width: 900px;
	margin: 0 auto;
	/* background: #fff; */
	color: #0c0b0b;
	border-radius: 0.75em;
	display: flex;
	flex-direction: column;
	/* padding: 0.5em; */
}
.forum-posts.cbox-holder
{
	width: 100%;
	max-width: 900px !important;
}
body:not(.thread-open) .forum-posts
{
	display: none;
}
/* .forum-posts .cbox-header
{
	display: none;
} */

.thread,
.thread-header
{
	display: contents;
}

.thread > div,
.thread-header > div
{
	align-items: center;
	padding: 0.75rem 0.5rem;
	border-bottom: 1px solid rgba(0, 0, 0, 0.1);
	overflow: hidden;
}

.thread-name a,
.thread-header > div:first-child
{
	display: flex;
}
.thread > div:first-child,
.thread-header > div:first-child { padding-left: 1rem; }
.thread > div:last-child,
.thread-header > div:last-child { padding-right: 1rem; }

.thread-header > div
{
	padding-top: 0.4rem;
	padding-bottom: 0.4rem;
	font-size: 0.7em;
	opacity: 0.5;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	border-bottom: 2px solid rgba(0, 0, 0, 0.15);
}

/* Hover — highlight all cells in a row */
.thread:hover > div { background: rgba(0, 0, 0, 0.05); }

.thread-name
{
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: 0.9em;
	text-align: left;
	align-self: center;
	cursor: pointer;
	position: relative;
}
.thread-name a
{
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: #0c0b0b;
	text-decoration: none;
}
.thread-name a:hover { text-decoration: underline; }

.thread-count,
.thread-last-post,
.thread-last-poster
{
	display: block;
	text-align: right;
	font-size: 0.75em;
	opacity: 0.6;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	line-height: 1.5;
	align-self: center;
}

@media (max-width: 600px)
{
	.forum-threads { display: block; }

	.thread-header { display: none; }

	.thread
	{
		display: grid;
		grid-template-columns: 1fr auto auto;
		grid-template-areas:
			"name name name"
			"count poster lastpost";
		border-bottom: 1px solid rgba(0, 0, 0, 0.1);
	}

	.thread > div { border-bottom: none; padding: 0.3rem 0.5rem; }
	.thread > div:first-child { padding-left: 1rem; }
	.thread > div:nth-child(2) { padding-left: 1rem; }
	/* .thread > div:last-child  { padding-right: 2rem; } */

	.thread-name        { grid-area: name; padding-top: 0.6rem; display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
	.thread-count       { grid-area: count; padding-top: 0.6rem; text-align: left; }
	.thread-count::after { content: " posts"; }
	.thread-last-post   { grid-area: lastpost; padding-bottom: 0.6rem; padding-left: 1rem !important; font-size: 0.65em; text-align: left; }
	.thread-last-poster { grid-area: poster;   padding-bottom: 0.6rem; font-size: 0.65em; text-overflow: clip; white-space: normal; }
}

.cbox-header .cbox-refresh
{
	margin-left: 1rem;
	transition: all 0.2s ease-in-out;
}
.cbox-header .cbox-refresh:hover,
.cbox-header .cbox-home:hover
{
	color: #fff;
	transform: scale(1.1);
	transition: all 0.2s ease-in-out;
}
.cbox-header .cbox-home 
{
    background: none;
    color: #111;
    opacity: .7;
    padding: 0;
    cursor: pointer;
    font-size: .7em;
    transform: translateY(5px);
    float: left;
	margin-right: 1rem;
	transition: all 0.2s ease-in-out;
}

.thread-name:hover
{
	/* text-decoration: underline; */
	color: #D11F28;
}
.thread.unread .thread-name::after
{
	content: 'NEW';
	color: #D11F28;
	position: absolute;
	font-size: 0.7em;
	left: 0;
	top: 0;
	transform: rotate(-20deg);
	animation: pulse 1.5s infinite;
}
@keyframes pulse
{
	0%   { color: #D11F28; transform: rotate(-20deg) translateY(0); }
	50%  { color: #FF6B6B; transform: rotate(-20deg) translateY(-2px); }
	100% { color: #D11F28; transform: rotate(-20deg) translateY(0); }
}

.thread-last-poster.clickable
{
	color: #D11F28;
	cursor: pointer;
	opacity: 1;
}