/* comments */

.comments .title,
.comments .subheading {
	color: #95A4AC;
	font-size: 15px;
	letter-spacing: 0.06em;
	text-align: center;
	text-transform: uppercase;
	font-family:'Montserrat';
}

@media screen and (min-width: 990px) {
	.comments .title,
	.comments .subheading {
		font-size: 17px;
	}
}

.comment-formatting .subheading {
	text-align: left;
}

.comment-formatting pre {
	display: inline-block;
	white-space: nowrap;
	overflow: auto;
	-ms-overflow-style: scrollbar;
	margin-bottom:0;
	font-size:11px;
	max-height: 24em;
	background: rgba(41, 128, 185, 0.05);
	border: 1px solid rgba(84, 156, 203, 0.2);
}

.comment-formatting .table-responsive {
	overflow: auto !important; /* jQuery override */
	margin-top:15px;
}

@media screen and (min-width: 990px) {
	.comment-formatting .table-responsive {
		margin-top:0; /* hide helper text margin for table on desktop */
	}
}

.comment-formatting .table {
	margin-bottom:0;
}

.comment-formatting {
	display:block;
}

.comment-formatting .table-responsive {
	border: 2px solid rgba(41, 128, 185, 0.1);
	-ms-overflow-style: scrollbar;
}

.comment-formatting th {
	color: #3084BB;
	text-transform: uppercase;
	font-weight: normal;
	padding:10px;
	font-family:'Montserrat';
}

.comment-formatting th span {
	font-weight:bold;
}

.comment-formatting .table > thead > tr > th,
.comment-formatting .table > tbody > tr > th,
.comment-formatting .table > tfoot > tr > th,
.comment-formatting .table > thead > tr > td,
.comment-formatting .table > tbody > tr > td,
.comment-formatting .table > tfoot > tr > td {
	border-top: 1px solid rgba(41, 128, 185, 0.1);
}

.comment-formatting .table > thead > tr > th {
	border-bottom: 2px solid rgba(41, 128, 185, 0.1);
}

.comment-formatting .title,
.comment-formatting .title span {
	margin: 10px 0;
	color: #3084bb;
	font-size: 12px;
}

.comment-formatting td.code {
	overflow: auto;
	-ms-overflow-style: scrollbar;
	max-width: 215px;
	border-right:1px solid rgba(41, 128, 185, 0.1);
	vertical-align: middle;
}

.comment-formatting td.result {
	vertical-align: middle;
	font-size: 13px;
}

.comment-formatting .helper-text {
	position: absolute;
	top: -14px;
	border-radius: 3px;
	margin: auto;
	left: 10%;
	background: #eaf3f8;
	padding: 2px 10px;
	font-size: 11px;
	color: #5097c5;
}

.comment-formatting .result,
.comment-formatting ul li,
.comment-formatting blockquote {
	font-size: 13px;
}

.comments .title span {
	color: #5a6773;
	font-weight: bold;
}

.comment-formatting {
	font-size:12px;
}

.comment-formatting .row {
	border-bottom:1px solid rgba(41, 128, 185, 0.1);;
	padding:5px 0;
}

.comment-formatting-help {
	margin-top: 10px;

	font-family: 'Monserrat';
}

@media screen and (min-width: 490px) {
	.comment-formatting-help {
		margin-left:10px;
	}
}

@media screen and (min-width: 990px) {
	.comment-formatting-help {
		margin-top:0;
	}
}

form.comment {
	padding: 10px;
	border-left: none;
}

@media screen and (min-width: 990px) {
	.comment-formatting-help {
		margin-left: 10px;
	}

	form.comment {
		padding-left:15px;
	}
}

.comment-content p {
	font-size: 15px;
	line-height: 160%;
}

.comment-content img {
	max-width:100%;
}

.comments .button,
.comments a.button {
	font-family: 'Montserrat', sans-serif;
	font-weight:bold;
	display: inline-block;
	width: 100%;
	text-align: center;
	border: 2px solid #2980b9;
	color: #2980b9;
	background: transparent;
	padding: 8px 45px;
	border-radius: 5px;
	transition: all 0.2s ease-out;
	margin: 5px 0;
	cursor: pointer;
}

.comments .button-submit,
.comments a.button-submit {
	color: #fff;
	background-color: #2980b9;
}

.comments .button-submit:active,
.comments a.button-submit:active {
	transform: scale(.95);
}

.comments .button-submit:hover,
.comments .button-hollow {
	color: #2980b9;
	background: transparent;
}

.comments .button-large {
	padding:11px 45px;
}

.comments .status-error {
	border-top: 2px solid #BF3A2B;
	border-bottom: 2px solid #BF3A2B;
	background-color: #E74D3C;
	color: #fff;
	display:none;
}

.comments .status-warning {
	border-top:2px solid #E77E21;
	border-bottom:2px solid #E77E21;
	background-color: #F39C0F;
	color: #fff;
}

.comments .status-success {
	border-top:2px solid #27AF60;
	border-bottom:2px solid #27AF60;
	background-color: #2ECC70;
	color: #fff;
}

.comments .status {
	width: 100%;
	display: block;
	padding: 10px 20px;
	margin-bottom: 15px;
}

.comments .status:empty {
	display:none;
}

.comments .form-group label {
	color:#484f56;
}

.comments {
	background:transparent;
}

/* question selected on product/article page */
.comments.comments-selected,
.comment.comment-selected {
	border-left: #2980B9 3px solid;
}

.comment {
	clear:both;
	padding:12px 20px 12px;
}

@media (min-width: 990px) {
	.comment {
		padding:15px 25px;
	}
}

.comment-add {
	margin-top:20px;
	padding:7px 15px;
}

@media (min-width: 990px) {
	.comment-add {
		padding:15px 25px 25px 25px;
	}
}

.comment-add h2 {
	text-transform: uppercase;
}

.comment-reply {
	border-left: #3084BB 2px solid;
	padding:15px 20px;
	margin-bottom:20px;
}

.comment-reply,
.comment-add {
	background: #F7F9F9;
	border-radius:3px;
}

.comment-reply .title {
	margin:10px 0 15px;
	text-transform: uppercase;
}

.comment-add .title {
	margin:10px 0;
}

.comments-view-reply,
.comments-view,
.comments-close-all,
.close-parent {
	cursor: pointer;
}

.button-mini.button-mini-orange {
	border-color: #F39C0F;
	color: #F39C0F;
}

.comment-thread-ctas {
	background: #FBFBFB;
	border-bottom: 2px solid whitesmoke;
	padding:15px 20px;
}

.question-group::before {
	border-radius:50%;
	position:relative;
	width:50px;
	display:none;
	top:37px;
	background: rgba(52, 152, 219, 0.03);
	content: " ";
	display:block;
	transition: all 0.2s ease-out;
}

.comment-question,
.comment-response {
	border-bottom: #F7F9F9 2px solid;
}

.comment-thread {
	margin-left: 25px;
	border-top: none;
	border-left: #F7F9F9 2px solid;
	border-bottom: #F7F9F9 2px solid;
}

.comment-cta {
	font-family: 'Montserrat', sans-serif;
	color: #3084bb;
	font-size:10px;
	padding:5px 0 0;
	text-transform: uppercase;
	display: inline-block;
	cursor: pointer;
	margin-right:10px;
	box-shadow: 0px 1px 0px;
}

.comment-ctas {
	display:block;
}

.button-mini,
a.button-mini,
.comments .tag {
	font-family: 'Montserrat', sans-serif;
	border:2px solid #3084bb;
	color: #3084bb;
	border-radius:3px;
	font-size:10px;
	padding:3px 10px;
	text-transform: uppercase;
	display: inline-block;
	cursor: pointer;
}

.button-mini:active,
a.button-mini:active {
	transform: scale(.98);
}

a.button-mini:hover {
	text-decoration: none;
}

.tag-moderator {
	color: #287fb8;
	margin: 5px 0px;
	font-size:10px;
	font-family: 'Montserrat', sans-serif;
	text-transform: uppercase;
}

.comment-account-icon {
	width: 13px;
	height: 13px;
	margin: 0 0 -1px 4px;
}

.tag-close {
	border: 2px solid #F39C0F;
	color: #F39C0F;
}

.comment-delete,
.comment-cta-ban,
.comment-cta-unban,
.question-delete {
	margin: 5px 0;
	border:none;
	color: #E74D3C;
	cursor: pointer;
}

.comment-cta-unban {
	color: #F09425;
}

.comment-byline {
	color: rgba(89, 89, 89, 0.75);
	font-size: 13px;
}

.comment-byline .meta {
	color: #D3D3D3;
	margin-left:5px;
}

/* Product Question */

.comments .asked-byline {
	color: rgba(89, 89, 89, 0.75);
	font-size: 10px;
	margin-bottom: 10px;
}

.comments .closed {
	display:none;
}

/* reign in markdown */

.comment-content h1,
.comment-content h2,
.comment-content h3,
.comment-content h4,
.comment-content h5 {
	font-weight:bold;
	font-size:16px;
	margin:8px 0 5px;
	font-family: 'Roboto', sans-serif;
	text-transform: none;
}

/* fix long lines that break mobile layout */
.comment-content code,
.comment-content p,
.comment-content strong {
	overflow-wrap: break-word;
	word-wrap: break-word;
	-ms-word-break: break-all;
	word-break: break-word;
	-ms-hyphens: auto;
	-moz-hyphens: auto;
	-webkit-hyphens: auto;
	hyphens: auto; /* Adds a hyphen where the word breaks */
}

.comment-content code {
	white-space: initial;
}

.comment-content ol,
.comment-content ul {
	font-size:15px;
	padding: 0 0 0 25px;
	margin:10px 0;
}

.comment-content hr {
	border-width: 1px;
	margin: 10px auto;
	max-width: 100%;
}

.comment-icon{
	font-size: 10px;
	padding-left: 2px;
}