#HCB_comment_box textarea {
  font-family: var(--fontFamily) !important;
  font-size: var(--fontSize) !important;
}

#hcb_form_name.hcb-shadow-r {
    border-style: solid !important;
    border-width: 2px !important;
    border-radius: 3px;
    border-color: var(--borderColor) !important;
    border-image: none !important;
    background-color: var(--boxColor);
    font-family: var(--fontFamily) !important;
    font-size: var(--fontSize) !important;
}

.hcb-shadow-r {
    color: var(--secondaryColor) !important;
}

textarea.commentbox.hcb-shadow-r::placeholder {
    color: var(--tertiaryColor) !important;
}

input.hcb-shadow-r::placeholder {
    color: var(--secondaryColor) !important;
}

.hcb-comment-tb button {
  color: var(--link) !important;
  font-family: var(--fontFamily) !important;
  font-size: var(--fontSize) !important;
}


/* the entire html comment box container. applies to everything */
#HCB_comment_box {
    box-sizing: border-box;
    display: flex;
    font-family: var(--fontFamily) !important;
    color: var(--secondaryColor) !important;
    font-size: var(--fontSize) !important;
}

#HCB_comment_box #comments_list {
    min-height: 0;
}

#HCB_comment_box p.error {
  border: 3px solid var(--warningBorderColor);
  border-radius: 5px;
  background-color: var(--warningBackgroundColor);
  color: var(--warningTextColor);
}

#HCB_comment_box textarea, #HCB_comment_box input.text {
    border: 2px solid var(--borderColor);
    border-radius: 3px;
    background-color: var(--boxColor);
}

#HCB_comment_box .hcb-wrapper-half {
  display:block;
  width:50%;
  float:left;
}
#HCB_comment_box .hcb-wrapper {
  clear:both;
  margin-bottom:0.5em;
}
#HCB_comment_box input.text {
  display:block;
  width:97%;
}

.comment {
  padding-left: 20px;
  padding-right: 20px;
}

.date {
  font-size: var(--fontSize) !important;
  color: var(--tertiaryColor) !important;
}

.hcb-comment-body {
  font-size: var(--fontSize) !important;
  color: var(--secondaryColor) !important;
}

/* the submit button */
#HCB_comment_box input.submit {
    margin:0 7px 3px 0;
    background-color: var(--borderColor) !important;
    border: 1px solid var(--borderColor) !important;
    border-radius: 2px;
    font-family: var(--fontFamily) !important;
    font-size: var(--fontSize) !important;
    font-weight: bold !important;
    line-height:130%;
    text-decoration:none;
    font-weight:bold;
    color: var(--navbarLink) !important;
    cursor:pointer;
    width:auto;
    overflow:visible;
    padding:4px 10px 3px 7px; /* IE6 */
}
#HCB_comment_box input.submit:hover{
    border: 1px solid var(--navbarLink) !important;
    border-radius: 2px !important;
}

#HCB_comment_box span.home-desc {
  opacity:0.4;
}

.home-desc a {
    color: var(--link) !important;
    text-decoration: underline !important;
}

/* the individual comment display containers */
#HCB_comment_box div.comment {
  border-top: 2px solid var(--borderColor);
  margin-bottom:0.5em;
}

/* the moderator message */
.hcb-mod  b{
  color: var(--primaryColor);
}

/* next, prev, ok and x link style */
.hcb-link {
  color: var(--link);
  text-decoration:underline;
}