.brobcommentbox
{
	display: flex;
	flex-direction: column;
}
.brobcommentbox *
{
	box-sizing: border-box;
}

	.brobcommentbox .comment_header
	{

		font-weight: bold;
	}
		.brobcommentbox .comment_header .sort
		{
			float: right;
		}

	.brobcommentbox .comment_comments
	{
		margin-top: 12px;
		display: flex;
		flex-direction: column;
		/* box-shadow: 0 3px 5px inset rgba(0,0,0,0.1); */
		/* border: 1px solid rgba(0,0,0,0.2); */
		/* border-radius: 5px; */
		max-height: 500px;
		overflow: hidden;
		overflow-y: auto;
		border-radius: 20px;

		background: repeating-linear-gradient(
			45deg,
			#111111,
			#111111 5px,
			#161616 5px,
			#161616 10px
		  );
		  background-attachment: fixed;
	}

		.brobcommentbox .comment_comments .comment
		{
			display: flex;
			flex-wrap: wrap;
			/* border: 1px solid green; */
			padding: 8px;
		}

		.brobcommentbox .comment_comments .comment:not(:last-child)
		{
			border-bottom: 1px solid rgba(0,0,0,0.01);
		}

		.brobcommentbox .comment_comments .comment:nth-child(even)
		{
			background-color: rgba(0,0,0,0.033);
		}

			.brobcommentbox .comment_comments .comment .name,
			.brobcommentbox .comment_post .name
			{
				/* border: 1px solid red; */
				flex-shrink: 0;
				flex-grow: 0;
				width: 150px;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}

			.brobcommentbox .comment_comments .comment .content,
			.brobcommentbox .comment_post .content
			{
				/* border: 1px solid blue; */
				flex-grow: 1;
				flex-shrink: 1;
				white-space: pre-wrap;
				word-wrap: break-word;
				/* width: 80%; */
				overflow: hidden;
			}

			.brobcommentbox .comment_comments .comment .stamp
			{
				/* border: 1px solid purple; */
				flex-grow:0;
				flex-shrink: 0;
				min-width: 100%;
				text-align: right;
				color: rgba(255, 255, 255, 0.5);
			}
			.brobcommentbox .comment_comments .comment .stamp:before
			{
				content: "Posted at ";
			}

		.brobcommentbox .comment_post
		{
			display: flex;
			flex-wrap: wrap;
			margin-top: 20px;
			/* box-shadow: 0 3px 5px inset rgba(0,0,0,0.1); */
			/* border: 1px solid rgba(0,0,0,0.2); */
			/* border-radius: 5px; */
		}

		.brobcommentbox .comment_post.submitting
		{
			pointer-events: none;
			opacity: 0.33;
		}

			.brobcommentbox .comment_post .help
			{
				margin-bottom: 5px;
				width: 100%;
				/* padding: 4px; */
				font-weight: bold;
			}

			.brobcommentbox .comment_post .name
			{
				padding-right: 5px;
			}

			.brobcommentbox .comment_post .content
			{
				height: 38px;
			}
			.brobcommentbox .comment_post .content.bigger
			{
				height: 116px;
			}

			.brobcommentbox .comment_post .name input::placeholder,
			.brobcommentbox .comment_post .content textarea::placeholder
			{
				color: #888;
			}

			.brobcommentbox .comment_post .name input,
			.brobcommentbox .comment_post .content textarea
			{
				box-sizing: border-box;
				width: 100%;
				border-radius: 12px;
				border: 1px solid rgba(0,0,0,0.3);
				padding: 10px;
				/* min-height: 32px; */

				color: #000;
				background-color: #e6e6e6;
				font-family: 'HKGroteskRegular', sans-serif;
			}

			.brobcommentbox .comment_post .name input.invalid,
			.brobcommentbox .comment_post .content textarea.invalid
			{
				border: 1px solid red;
				/* overflow:hidden; */

				background: repeating-linear-gradient(
					45deg,
					#e6e6e6,
					#e6e6e6 5px,
					#e6d6d6 5px,
					 #e6d6d6 10px
				  );
				  background-attachment: fixed;
			}
			}
			.brobcommentbox .comment_post .name input.invalid-placeholder::before,
			.brobcommentbox .comment_post .content textarea.invalid-placeholder::before
			{
				color:#ff0000;

			}
			.brobcommentbox .comment_post .content textarea
			{
				height: 100%;
				resize: none;
			}

			.brobcommentbox .comment_post .comment_submit
			{
				/* border: 1px solid purple; */
				flex-grow:0;
				flex-shrink: 0;
				min-width: 100%;
				text-align: right;
				margin-top: 15px;
				/* padding: 5px; */
			}

			/* .brobcommentbox .comment_post .comment_submit button
			{
				border: 1px solid rgba(0,0,0,0.3);
				border-radius: 4px;
			} */

	.brobcommentbox .alert
	{
		padding-top: 32px;
		text-align: center;;
		width: 100%;
	}