/* Comments validation */

.email {
  position: relative;
}

.comment-form .form-submit {
  display: flex;
  justify-content: end;
}

/* Comments validation */

.input-control,
.two-inputs {
  position: relative;
  display: block;
}

.input-control.author {
  margin-top: 25px;
}

.input-control.email input:focus ~ .input-control__help-text,
.input-control.email input.isActive ~ .input-control__help-text {
  opacity: 0;
  pointer-events: none;
}

.input-control__help-text svg {
  cursor: pointer;
  position: absolute;
  top: 14px;
  left: 46px;
}

.input-control__help-text svg:hover + div {
  display: block;
}

.input-control__help-text svg path {
  stroke: #4f6476;
}

#comment-error,
#author-error,
#email-error {
  color: #F04438;
}

.two-inputs .input-error {
  border-color: #F04438 !important;
  position: relative;
}

.input-control__help-text div {
  display: none;
  max-width: 300px;
  padding: 12px;
  background: #fff;
  border-radius: 8px;
  position: absolute;
  z-index: 1;
  box-shadow: 0px 12px 16px -4px rgba(16, 24, 40, 0.08), 0px 4px 6px -2px rgba(16, 24, 40, 0.03);
  left: 29px;
  bottom: 40px;
  font-family: 'Roboto', sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: 0.03em;
  color: #0A1C2B;
  opacity: 1;
  pointer-events: auto;
  transition: all 0.2s;
}

.input-control__help-text div strong {
  font-weight: 600;
}

.input-control__help-text div::after {
  content: '';
  position: absolute;
  width: 12px;
  height: 12px;
  bottom: -6px;
  left: 19px;
  background: #fff;
  border-radius: 1px;
  transform: rotate(45deg);
}

.comment-form input.input--focused ~ .input-control__help-text {
  display: none;
}

.comment-form-subscriptions {
  display: none !important;
}

.input-control .input-error {
  border-color: #F04438 !important;
  position: relative;
}

.two-inputs:has(> .input-error):after,
.input-control:has(> .input-error):after {
  content: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_219_398)'%3E%3Cpath d='M8.00004 5.33337V8.00004M8.00004 10.6667H8.00671M14.6667 8.00004C14.6667 11.6819 11.6819 14.6667 8.00004 14.6667C4.31814 14.6667 1.33337 11.6819 1.33337 8.00004C1.33337 4.31814 4.31814 1.33337 8.00004 1.33337C11.6819 1.33337 14.6667 4.31814 14.6667 8.00004Z' stroke='%23F04438' stroke-width='1.33333' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_219_398'%3E%3Crect width='16' height='16' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A");
position: absolute;
right: 0px;
  top: 0;
}

.input-control .input-valid,
.two-inputs .input-valid {
  border-color:#3A9C17 !important;
  position: relative;
}
.input-control:has(> .input-valid):after,
.two-inputs:has(> .input-valid):after {
content: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_219_384)'%3E%3Cpath d='M5.00004 8.00004L7.00004 10L11 6.00004M14.6667 8.00004C14.6667 11.6819 11.6819 14.6667 8.00004 14.6667C4.31814 14.6667 1.33337 11.6819 1.33337 8.00004C1.33337 4.31814 4.31814 1.33337 8.00004 1.33337C11.6819 1.33337 14.6667 4.31814 14.6667 8.00004Z' stroke='%233A9C17' stroke-width='1.33333' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_219_384'%3E%3Crect width='16' height='16' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A");
  position: absolute;
right: 0px;
  top: 0;
}

.place-holder {
  pointer-events: none !important;
  transition: all 0.2s;
  touch-action: manipulation;
  position: absolute;
  top: 11px;
}

.form-control {
  display: block;
  width: 100%;
  max-width: 100%;
  resize: none;
  border: none !important;
  background-color: transparent !important;
  font-size: 13px;
  letter-spacing: .52px;
  line-height: 15.6px;
  color: #000;
  font-weight: 400;
  -webkit-appearance: none !important;
  border-radius: 0!important;
  outline: none !important;
  padding-bottom: 5px;
  border-bottom: 1px solid #4f6476 !important;
}

.comment-form #respond textarea {
  background-color: transparent !important;
}

.form-control:focus {
  border-bottom: 1px solid #4f6476;
}

.flex-box {
  /* display: flex;
  flex-direction: column-reverse; */
  margin-top: 25px;
}

.comment-form .input--focused+label {
  color: #4f6476;
  top: -11px;
  left: 1px;
}

.comment-form .input--focused+label + .input-control__help-text svg {
  top: -14px;
}

.comment_post {
  scroll-margin-top: 150px;
  top: 117px;
}

.comment_postt:first-child {
  padding-top: 2rem;
}