#treelike-comments > form > div:nth-child(8) > input[type='text'] {
  background: #fff;
  border: 1px solid #f5f5ff;
  padding: 13px 10px;
}

.input-wrapper #treelike-comments form input[type='text'] {
  height: 30px;
  padding: 3px 5px;
  width: 200px;
  border-radius: 3px;
  box-shadow: none;
  font-size: 16px;
  line-height: 28px;
  font-family: inherit;
  display: inline-block;
  background: #fff;
  border: 1px solid #999;
}

#treelike-comments form.add_new_answer {
  margin-top: 10px;
}

#treelike-comments form div.close {
  position: absolute;
  top: 6px;
  right: 6px;
  background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyBpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBXaW5kb3dzIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjk4MTkzOUZENjc3RjExRTFCMzg2QzFDNDQ1QjQ3M0U5IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjk4MTkzOUZFNjc3RjExRTFCMzg2QzFDNDQ1QjQ3M0U5Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6OTgxOTM5RkI2NzdGMTFFMUIzODZDMUM0NDVCNDczRTkiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6OTgxOTM5RkM2NzdGMTFFMUIzODZDMUM0NDVCNDczRTkiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7m/B/pAAAAiUlEQVR42mL8//8/AyWAiYFCwAJjpKamkqRx9uzZWF1QCsQ2ePSB5IrweeE4EK/GYYgNVO4UPgOOAHEoFkNgmkOhajDDAIchoVAxrJpxGYBuCAMuzVSJRiY8oQ1zdiiegMVqAHqAHcFnCBMBzYRiB8MASzwBBjPEDF8sdBMIsyPohjMOeG4ECDAAL/EnxcVA32IAAAAASUVORK5CYII=');
  width: 16px;
  height: 16px;
  cursor: pointer;
}

#treelike-comments .two-input {
  margin: 0 0 15px 0;
}

#treelike-comments .add_new_comment .textarea-wrapper .close {
  display: none;
}

#treelike-comments .two-input .error {
  margin: 0;
}

#treelike-comments .two-input .input-wrapper + .input-wrapper {
  margin-left: 10px;
}

#treelike-comments .error {
  display: block;
  margin: 10px 0;
  padding: 10px;
  color: #c2646d;
  border: 1px solid #eca8a8;
  text-align: center;
}

#treelike-comments #root .error {
  margin: 0 0 15px 0;
}

#treelike-comments .input-wrapper {
  display: inline-block;
  vertical-align: top;
}

#treelike-comments .input-wrapper span {
  display: block;
  font-size: 14px;
  line-height: 12px;
  margin: 0 0 5px 0;
  font-weight: normal;
  text-transform: none;
}

#treelike-comments .textarea-wrapper {
  width: 100%;
  height: auto;
}

#treelike-comments form textarea {
  background: #fff;
  border: 1px solid #999;
  border-radius:5px;
  color: #666;
  width: 100%;
  height: 100px;
  font-size: 0.8rem;
  line-height: 1.4rem;
  padding: 5px 10px;
  display: block;
  overflow: hidden;
  margin-bottom: 8px;
  box-sizing: border-box;
}

#treelike-comments .hiddendiv {
  white-space: pre-wrap;
  word-wrap: break-word;
  min-height: 60px;
  width: 100%;
  resize: none;
  font-size: 13px;
  line-height: 20px;
  padding: 3px 23px 3px 5px;
  display: none;
}

#treelike-comments #root {
  border: 1px dotted #808080;
}

#treelike-comments ul {
  list-style: none;
  margin: 0;
  padding: 0 15px;
}

#treelike-comments ul ul {
  margin-left: 20px;
}

#treelike-comments ul li a {
  margin: 0 0 0 10px;
}

#treelike-comments ul li a.delete {
  border: 1px solid #FF4747;
  border-radius: 3px;
  color: #FF4747;
  padding: 3px 10px;
}

#treelike-comments ul li a.delete:hover {
  border: 1px solid #FF8C00;
  color: #FF8C00;
}

#treelike-comments ul li a.approve {
  border: 1px solid var(--main-color);
  border-radius: 3px;
  color: var(--main-color);
  padding: 3px 10px;
}

#treelike-comments ul li a.approve:hover {
  border: 1px solid var(--secondary-color);
  color: var(--secondary-color);
}

#treelike-comments ul li a i {
  vertical-align: -1px;
}

#treelike-comments ul li .top-line {
  margin-bottom: 5px;
}

#treelike-comments ul li .answer {
	float: left;
	color: #F09;
	font-weight: bold;
	font-size: 0.7rem;
	letter-spacing: .5px;
    text-decoration: none;
}

#treelike-comments ul li .answer:hover {
  color: #FF8C00;
}

#treelike-comments ul li span.author {
  color: var(--main-color);
  font-size: 0.9rem;
  line-height: 1.6rem;
}

#treelike-comments ul li .icon-chat {
  vertical-align: -2px;
  font-size: 17px;
}

#treelike-comments ul li span.date {
  background: var(--secondary-color);
  border: 1px solid #CCC;
  border-radius: 2px;
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.5px;
  line-height: 0.7rem;
  color: #FFF;
  margin: 3px 0 0 25px;
  padding: 3px 10px;
}

#treelike-comments ul li {
  padding: 15px 0 0 0;
  background: none;
  margin: 0;
  border-top: 1px solid #CCC;
}

#treelike-comments ul li .modify {
  border: 1px solid var(--secondary-color);
  border-radius: 3px;
  color: var(--secondary-color);
  padding: 3px 10px;
  text-decoration: unset;
}

#treelike-comments ul li .modify:hover {
  border: 1px solid var(--main-color);
  color: var(--main-color);
  text-decoration: unset;
}

#treelike-comments ul li .approve > i,
#treelike-comments ul li .modify > i,
#treelike-comments ul li .delete > i
{
  display: inline-block;
  font-size: 0.9rem;
  margin-left: 5px;
}

#treelike-comments div.bottom-line {
  margin-top: 5px;
  float: none !important;
}

#treelike-comments ul li span.rating {
  padding: 0 5px;
}
#treelike-comments ul li span.rating a i {
  font-size: 16px;
}

#treelike-comments ul li span.rating-count {
  color: #00bf2d;
}

#treelike-comments ul li span.rating-count.negative {
  color: #e10000;
}

#treelike-comments ul li span.action {
  display: inline-block;
  float: right;
}

#treelike-comments .user-img i {
  font-size: 15px;
  line-height: 15px;
  display: inline-block;
  vertical-align: middle;
  margin: 3px 0 0 0;
}

#treelike-comments .comment-info {
  padding: 0 0 10px 0;
}

#treelike-comments .user-img {
  color: #666;
  float: left;
  margin: 0 10px 0 0;
  width: 25px;
  height: 25px;
  border-radius: 121px;
  border: 1px solid;
  text-align: center;
}

#for-button-all-load {
  text-align: center;
}

#load-all-comments {
  cursor: pointer;
  border: 1px solid #eee;
  border-radius: 5px;
  padding: 7px 15px;
}

.comment-subscribe {
  color: #C09;
  font-style: italic;
  text-align: center;
  margin-bottom: 10px;
}

.comment-subscribe input {
  width: 16px;
  height: 16px;
  margin: 0 5px;
}

.treelike-showImgComments,
#treelike-comments ul li .treelike-showImgComments {
  display: inline-block;
  color: var(--secondary-color);
  font-size: 0.9rem;
  letter-spacing: 0.5px;
  text-decoration: none;
  width: fit-content;
}
.treelike-showImgComments:hover,
#treelike-comments ul li .treelike-showImgComments:hover {
  color: #FF8C00;
}
.treelike-comments-dropZone,
#treelike-comments ul li .treelike-comments-dropZone {
  display: inline-block;
  width: 600px;
  height: 100px;
  border: 2px dashed rgba(0, 0, 0, 0.3);
  border-radius: 2px;
  text-align: center;
  line-height: 100px;
  font-size: 20px;
  color: rgba(0, 0, 0, 0.3);
  position: relative;
  margin-top: 10px;
}
#treelike-comments ul li .treelike-comments-dropZone span {
  text-align: center;
  line-height: 100px;
  font-size: 20px;
  font-weight: initial;
  text-transform: initial;
}
.treelike-comments-dropZone input {
  width: 100%;
  height: 100%;
  vertical-align: top;
  position: absolute;
  left: 0;
  opacity: 0;
  cursor: pointer;
}
#treelike-comments-ajax-body .commentImage img,
#treelike-comments-ajax-body .treelike-comments_preview img {
  border-radius: 5px;
  height: 100px;
  margin: 5px;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.1);
  border: 1px solid #ccc;
}

#treelike-comments form div.textarea-wrapper.clearfix textarea:focus,
#treelike-comments > form > div:nth-child(8) > input[type='text']:focus {
  border-color: #f39c12;
}

#treelike-comments form button.sendComment{
  background: transparent;
  font-size: 0.8rem;
  border-radius: 3px;
  border: 1px solid var(--main-color);
  cursor: pointer;
  margin: 10px auto;
  color: var(--main-color);
  font-weight: normal;
  display: inline-flex;
  height: 30px;
  width: auto;
  max-width: 300px;
  padding: 0 10px;
  user-select: none;
  transition: color .3s, background .3s, box-shadow .3s;
  text-align: center;
  white-space: nowrap;
  align-items: center;
  justify-content: center;
}

#treelike-comments form button.sendComment:active{
  transform: translateY(3px);
}

#treelike-comments form button.sendComment:hover{
  transition: .3s;
  background: linear-gradient(to top, var(--main-color), var(--secondary-color));
  color: #FFF;
}

@media screen and (max-width: 768px) {
  .c-tab #treelike-comments .two-input .input-wrapper + .input-wrapper {
    margin-left: 0;
    padding-top: 10px;
  }

  #treelike-comments form button.sendComment {
    margin-bottom: 10px;
  }
}

#treelike-comments form input[type='text'] {
  height: 30px;
  padding: 3px 5px;
  width: 200px;
  border-radius: 3px;
  box-shadow: none;
  font-size: 13px;
  line-height: 26px;
  display: inline-block;
  background-color: #fff;
  border: 1px solid #999;
}

.c-tab #treelike-comments form input[type='text']:focus {
  border-color: #f39c12;
  box-shadow: inset 0 0 0 1px #f39c12;
}