/* content plugin styles */
.jcomments-links {
	margin-top: 10px;
	clear: both;
	text-align: left;
}

.comments-link {
	background-position: 0 -27px;
}

/* JComments common styles */
#jc {
	clear: both;
}

#jc a:link, #jc a:visited, #jc a:hover {
	outline: none;
}

#jc .busy {
	display: none;
	margin: 3px auto;
	padding: 0;
	width: 16px;
	height: 16px;
	background: url(images/jc_busy.gif) no-repeat;
}

#jc p.message {
	color: #777;
	background-color: inherit;
	background-image: none;
	text-align: center;
	text-decoration: none;
	text-transform: none;
	text-indent: 0;
	padding: 5px 0 0 0;
	border-top: 1px solid #D2DADB;
}

#comments {
	margin: 0;
	padding: 0;
	width: 100%;
	text-align: left;
	text-decoration: none;
	text-transform: none;
	text-indent: 0;
}

#comments a {
	text-decoration: none;
}

#comments a[rel*=external], #comments a[rel*=external]:active, #comments a[rel*=external]:hover, #comments a[rel*=external]:focus {
	background: url(images/jc_link.gif) no-repeat center right;
	padding: 0 10px 0 0;
	margin: 0 2px;
	display: inline-block;
}

/* List footer */
.comments-list-footer {
	margin-bottom: 1rem;
}

/* Show/hide form */
#comments-form-link .showform {
	margin: 5px 0 22px 22px;
	font-weight: bold;
}

/* Comment */
#comments .comment-box {
	margin: 0;
	padding: 0;
}

#comments .comment-avatar {
	float: left;
	margin: 0 .5rem .5rem 0;
	min-width: 32px;
	padding: 0;
}

#comments .avatar-indent {
	padding-left: 40px;
}

.comment-info dd {
	float: left;
	font-size: .8em;
	margin-top: .2em;
	margin-right: .5em;
}

/* Avatar */
#comments .comment-avatar img {
	max-width: 200px;
	border: none !important;
}

#comments .comment-body {
	clear: both;
	margin: 6px 0 0;
	padding: 0 0 2px;
}

/* Quote, Code and Hidden block styles */
#comments .quote, #comments blockquote, #comments .code {
	margin: 5px 0;
}

#comments blockquote {
	border-left: 0.25em solid #849B9F;
	color: #849B9F;
	text-align: left;
	padding: 8px;
}

#comments .code {
	background: none;
	border: none;
	padding: 0;
}

#comments figure {
	margin-bottom: 1rem;
}

/* Quote and Reply to buttons panel */
#comments .comments-buttons {
	float: right;
	margin: 5px !important;
}

#comments .email, #comments .emailactive {
	text-decoration: none;
	white-space: normal;
	margin: 0;
	padding: 0;
	line-height: 10px;
	cursor: pointer;
	border-bottom: 1px dotted #999;
}

#comments .email {
	color: #444;
	background-color: inherit;
}

#comments .emailactive {
	color: #cc0000;
	background-color: inherit;
}

#comments .email img, #comments .emailactive img {
	padding: 0;
}

#comments .comment-body img {
	padding: 0;
	border: 0 none;
}

#comments .comment-body .img {
	padding: 4px 0 !important;
	max-width: 500px;
}

#comments .toolbar {
	clear: both;
	border-top: 1px solid #ccc;
	margin: 8px 0 0 0;
	padding: 5px 0 0 0;
}

#comments .toolbar .main-actions {
	float: left;
}

#comments .toolbar .main-actions a {
	padding: 0 5px 0 0;
}

#comments .toolbar .user-actions {
	float: right;
}

#comments .toolbar .user-actions a {
	padding: 0 0 0 5px;
}

/* Comments list */
#comments .even, #comments .odd {
	margin-bottom: 10px;
}

.comments-list-child .comment {
	background-color: #fafafa;
	margin-left: 1rem;
}

#comments-list .comments-inline-edit {
	padding: 5px;
}

#comments .comment.hide-children + .comments-list-child {
	display: none;
}

/* Comment form */
div.comments-policy {
	padding: 5px;
	margin: .5rem 0;
}

#comments-form .counter {
	color: #777;
	font-size: 1em;
}

#comments-inline-edit {
	padding: .5rem;
}

#comments-form img.smile {
	margin: 0 3px 3px 0;
	padding: 0;
	border: none;
	cursor: pointer;
	float: none;
	display:inline-block;
}

#comments-form img.captcha {
	padding: 0;
	margin: 0 0 3px 0;
	border: 1px solid #ccc;
}

#comments-form span.captcha {
	color: #777;
	cursor: pointer;
	display: inline-block;
}

.comments-inline-report {
	margin-top: .5rem;
}

#comments-form input.captcha {
	width: 116px;
	margin: 3px 0 5px 0;
}

#comments-form textarea {
	min-width: 250px !important;
	resize: none;
}

#comments-form-message {
	padding: .5rem;
}

#comments-form .counterpanel {
	height: 13px;
	display: block;
	overflow: hidden;
	color: #ccc;
	padding: 0;
	margin: 0;
	border: 1px solid #ddd;
	border-top-width: 0;
	max-width: 400px !important;
	width: 350px;
	background-color: #eee;
}

#comments-form .grippie {
	height: 13px;
	display: block;
	overflow: hidden;
	color: #ccc;
	padding: 0;
	margin: 0;
	border: 1px solid #ddd;
	border-top-width: 0;
	min-width: 250px !important;
	cursor: s-resize;
	background: #eee url(images/jc_resize.gif) no-repeat right 2px;
}

#comments-form .grippie .counter {
	font-size: 10px;
	padding: 0;
	margin: 0;
}

#comments-form .grippie span {
	display: block;
	float: left;
}

#comments-form .grippie span span {
	display: inline;
	float: none;
}

#comments-form-smilespanel {
	display: none;
	cursor: pointer;
	padding: 2px;
	max-width: 200px;
	background-color: #fff;
	border: 1px solid #ccc;
	overflow: auto;
	left: 0;
	top: 0;
	position: absolute;
	z-index: 999999 !important;
}

#comments-footer, #comments-footer a {
	color: #ccc !important;
	background-color: inherit;
	font: normal 9px Verdana, Arial, Sans-Serif !important;
}

#comments-footer {
	display: block;
	height: 14px;
	border-top: 1px solid #ccc;
	padding-top: 1px;
	margin-top: 4px;
	text-align: right;
}

#comments-footer a {
	text-decoration: none !important;
	text-transform: none;
	padding: 0;
	margin: 0;
	border: none !important;
	float: right;
	background: none !important;
}

/* Vote */
#jc .comments-vote {
	width: 6em;
	float: right;
}

#jc .comments-vote .busy {
	margin: 0;
	float: right;
	width: 16px;
}

#jc .comments-vote .vote-value {
	font-weight: 700;
	line-height: 14px;
	margin: 0;
	float: right;
}

/* BBCode */
#jc .bbcode a, #jc .bbcode a:focus, #jc .bbcode a:active, #jc .bbcode a:hover {
	width: 23px;
	height: 23px;
	float: left;
	margin: 0 2px 0 0;
	display: block;
	background-color: transparent !important;
	background-repeat: no-repeat;
	background-image: url(images/jc_bbcodes.gif);
	text-decoration: none;
	border: none !important;
}

#jc a.bbcode-empty {
	background-position: 0 0;
}

#jc a.bbcode-b {
	background-position: -30px 0 !important;
}

#jc a.bbcode-i {
	background-position: -60px 0 !important;
}

#jc a.bbcode-u {
	background-position: -90px 0 !important;
}

#jc a.bbcode-s {
	background-position: -120px 0 !important;
}

#jc a.bbcode-url {
	background-position: -150px 0 !important;
}

#jc a.bbcode-img {
	background-position: -180px 0 !important;
}

#jc a.bbcode-list {
	background-position: -210px 0 !important;
}

#jc a.bbcode-hide {
	background-position: -240px 0 !important;
}

#jc a.bbcode-quote {
	background-position: -270px 0 !important;
}

#jc a.bbcode-smile {
	background-position: -300px 0 !important;
}

#jc a.bbcode-youtube {
	background-position: -330px 0 !important;
}

#jc a.bbcode-google {
	background-position: -360px 0 !important;
}

#jc a.bbcode-wiki {
	background-position: -390px 0 !important;
}

#jc a.bbcode-facebook {
	background-position: -420px 0 !important;
}

#jc a.bbcode-flickr {
	background-position: -450px 0 !important;
}

#jc a.bbcode-instagram {
	background-position: -480px 0 !important;
}

#jc a.bbcode-vimeo {
	background-position: -510px 0 !important;
}

#jc .bbcode img {
	width: 23px;
	height: 23px;
	float: left;
	margin: 0 2px 0 0;
}

/* Rounded comments */
#jc .rbox {
	padding: 4px 8px;
	overflow: hidden;
}
/* JComments 5: approved blue raised JCarteggio appearance, 2026-11-03.
   Only presentation is changed. The stock PHP layouts, CAPTCHA and JS remain intact. */
#content #jc {
  --jc-blue: #075875;
  --jc-deep: #04394f;
  --jc-rim: #78b9d1;
  --jc-ink: #294a59;
  clear: both;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin: 30px 0 22px;
  color: var(--jc-ink);
}
#content #jc,
#content #jc * { box-sizing: border-box; }

/* The component keeps its existing heading and AJAX refresh control. */
#content #jc #comments .comments-list-header { margin: 0 0 21px; }
#content #jc #comments .comments-list-header .h6 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 62px;
  margin: 0 0 7px;
  padding: 12px 18px;
  border: 1px solid #075875;
  border-radius: 11px;
  background: linear-gradient(180deg,#8bd9ee 0%,#299fc4 42%,#08799d 65%,#075875 100%);
  box-shadow: inset 0 2px #d9f7ff,0 6px 0 #04394f,0 11px 17px #0d688733;
  color: #fff;
  font-size: clamp(18px,2vw,22px);
  font-weight: 700;
  line-height: 1.25;
  text-shadow: 0 1px 2px #063f5b;
}
#content #jc #comments .comments-list-header .h6 a {
  flex: 0 0 auto;
  color: #fff;
  text-shadow: 0 1px 2px #063f5b;
}

/* Each comment is a raised card with the same blue header and pale body as the approved mockup. */
#content #jc #comments-list {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  padding: 0;
}
#content #jc #comments-list .even,
#content #jc #comments-list .odd { margin: 0 0 23px; }
#content #jc #comments-list .rbox {
  position: relative;
  display: grid;
  grid-template-columns: 48px minmax(0,1fr);
  column-gap: 12px;
  align-items: start;
  width: 100%;
  min-width: 0;
  padding: 12px 15px 14px;
  overflow: hidden;
  border: 1px solid #8dc8db !important;
  border-radius: 11px !important;
  background: linear-gradient(#fff,#f1fbff);
  box-shadow: 0 6px 0 #80b8cb,0 12px 18px #07587524;
}
#content #jc #comments-list .rbox::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 70px;
  border-bottom: 1px solid #8dc8db;
  background: linear-gradient(180deg,#f9feff,#d8eff8 52%,#b7deed);
  box-shadow: inset 0 2px #fff,0 2px 4px #07587516;
  pointer-events: none;
}
#content #jc #comments-list .rbox > * { position: relative; z-index: 1; min-width: 0; }
#content #jc #comments-list .comment-avatar {
  grid-column: 1;
  float: none;
  width: 42px;
  min-width: 42px;
  height: 42px;
  margin: 0;
  padding: 3px;
  overflow: hidden;
  border: 1px solid #0a799b;
  border-radius: 8px;
  background: linear-gradient(#80d3e6,#1486a8 55%,#075875);
  box-shadow: inset 0 1px #d7faff,0 3px 0 #064761;
}
#content #jc #comments-list .comment-avatar img {
  display: block;
  width: 34px;
  height: 34px;
  max-width: 34px;
  object-fit: cover;
  border-radius: 5px;
}
#content #jc #comments-list .comment-info {
  grid-column: 2;
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  align-items: center;
  gap: 0 10px;
  min-height: 42px;
  margin: 0;
  padding: 0;
  color: #56798a !important;
}
#content #jc #comments-list .comment-info.avatar-indent { padding-left: 0; }
#content #jc #comments-list .rbox:not(:has(.comment-avatar)) .comment-info { grid-column: 1 / -1; }
#content #jc #comments-list .comment-info dd {
  float: none;
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
}
#content #jc #comments-list .comment-info .createdby {
  color: #075875;
  font-size: 15px;
  font-weight: 700;
}
#content #jc #comments-list .comment-info .permalink { order: 3; }
#content #jc #comments-list .comment-info .published { order: 2; }
#content #jc #comments-list .comment-info .comments-vote { order: 4; }
#content #jc #comments-list .comment-info .icon-user,
#content #jc #comments-list .comment-info .icon-calendar { display: none; }
#content #jc #comments-list .comment-info a { color: #075875; }
#content #jc #comments-list .comment-box {
  grid-column: 1 / -1;
  width: 100%;
  min-width: 0;
  margin-top: 22px;
}
#content #jc #comments-list .comment-body {
  clear: none;
  margin: 0;
  padding: 5px 1px 9px;
  color: #294a59;
  font-size: 15px;
  line-height: 1.6;
  overflow-wrap: anywhere;
}
#content #jc #comments-list .comments-buttons {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  float: none;
  margin: 0 !important;
  padding: 0 0 2px;
}
#content #jc #comments-list .comments-buttons a {
  display: inline-block;
  margin: 0;
  padding: 5px 10px;
  border: 1px solid #6da7bf;
  border-radius: 6px;
  background: linear-gradient(#fff,#cbeaf5);
  box-shadow: inset 0 1px #fff,0 3px 0 #86b4c6;
  color: #075875;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.35;
  text-decoration: none;
}
#content #jc #comments-list .comments-list-child { min-width: 0; }
#content #jc #comments-list .comments-list-child .comment { margin-left: min(30px,6vw); }

/* Leave JComments' input markup and validation untouched. */
#content #jc > .h6 {
  margin: 27px 0 0;
  padding: 11px 17px;
  border: 1px solid #78b9d1;
  border-radius: 10px 10px 0 0;
  background: linear-gradient(#e7f8fd,#9dd1e4);
  box-shadow: inset 0 2px #fff;
  color: #075875;
  font-size: clamp(17px,1.7vw,21px);
  font-weight: 700;
  line-height: 1.35;
}
#content #jc #comments-form {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin: 0 0 18px;
  padding: 18px 20px 21px;
  border: 1px solid #78b9d1;
  border-top: 0;
  border-radius: 0 0 11px 11px;
  background: linear-gradient(#fff,#eaf8fc);
  box-shadow: 0 7px 0 #7cb7cb,0 14px 21px #07587520;
}
#content #jc #comments-form .row.align-items-center .form-label {
  color: #345b6c;
  font-weight: 700;
}
#content #jc #comments-form .form-control {
  border: 1px solid #a9cbd8;
  border-radius: 7px;
  background: #fff;
  box-shadow: inset 0 2px 4px #0a5e7814;
  color: #294a59;
  font-size: 14px;
}
#content #jc #comments-form .form-control:focus {
  border-color: #1685aa;
  box-shadow: 0 0 0 3px #1685aa26;
}
#content #jc #comments-form #comments-form-buttons {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px;
  width: 100%;
  max-width: 100%;
}
#content #jc #comments-form #comments-form-buttons button {
  width: auto;
  min-height: 42px;
  padding: 8px 17px;
  border-radius: 7px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
}
#content #jc #comments-form #comments-form-send {
  border: 1px solid #075875;
  background: linear-gradient(#83d9ee,#259bc0 48%,#075875);
  box-shadow: inset 0 1px #dbf7ff,0 4px 0 #04394f;
  color: #fff;
  text-shadow: 0 1px #04394f;
}
#content #jc #comments-form #comments-form-reset,
#content #jc #comments-form #comments-form-cancel {
  border: 1px solid #6da7bf;
  background: linear-gradient(#fff,#cbeaf5);
  box-shadow: inset 0 1px #fff,0 3px 0 #86b4c6;
  color: #075875;
}
#content #jc #comments-form #comments-form-buttons button:active,
#content #jc #comments-list .comments-buttons a:active { transform: translateY(2px); }
#content #jc #comments-form .g-recaptcha { max-width: 100%; }

@media (max-width: 600px) {
  #content #jc { margin-top: 22px; }
  #content #jc #comments .comments-list-header .h6 { min-height: 54px; padding: 10px 13px; }
  #content #jc #comments-list .rbox { grid-template-columns: 42px minmax(0,1fr); gap: 0 9px; padding: 10px 11px 13px; }
  #content #jc #comments-list .rbox::before { height: 76px; }
  #content #jc #comments-list .comment-info { gap: 0 7px; }
  #content #jc #comments-list .comment-info dd { font-size: 12px; }
  #content #jc #comments-list .comment-info .createdby { font-size: 14px; }
  #content #jc #comments-list .comment-box { margin-top: 24px; }
  #content #jc #comments-list .comment-body { font-size: 14px; }
  #content #jc #comments-form { padding: 15px 12px 18px; }
  #content #jc > .h6 { padding: 9px 12px; }
}
@media (max-width: 359px) {
  #content #jc #comments-form { padding-right: 9px; padding-left: 9px; }
  #content #jc #comments-list .comment-info .comments-vote { flex-basis: 100%; }
  #content #jc #comments-list .rbox::before { height: 82px; }
}