.form-field {position: relative;}

.html-editor  input{
  min-height:32px;
  margin-top: -3px;
}
/* ##### LABEL ##### */
.form-field label:not(.error) {
  display:inline-block;
  line-height:normal;
  margin:0 0 5px 0;
  /*font-weight: 400;*/
  color: var(--color-secondary);
}

.form-field .char-count {float: right; font-size: 12px; position: relative; bottom: 0;}

/* ##### INPUT ##### */
.form-field input:not([type='submit']), .form-field textarea, .form-field select {
  height:40px;
  background-color: transparent;
  border: 1px solid var(--color-tertiary);
  border-bottom: 2px solid var(--color-tertiary);
  display:block;
  padding:0 16px;
  width:100%;
  line-height: normal;
  color: var(--color-text);
  transition: border 0.3s ease-in-out, filter 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
  font-weight: 600;
}
.form-field select {
  border: 2px solid var(--color-text);
}

.form-field input[type=number] {
  padding-right:0;
}

.form-field input[type=file] {
  height: auto;
  padding: 0;
  border: none;
  width: auto;
  max-width: 100%;
  background: transparent;
}

input[type=search] {
  box-sizing: border-box;
}

.form-field textarea {
  height:160px;
  padding: 5px 15px;
  max-width: 100%;
  min-width: 100%;
}

.form-field input:not([disabled]):focus, .form-field textarea:not([disabled]):focus, .form-field select:not([disabled]):focus,
.form-field input:not([readonly]):focus, .form-field textarea:not([readonly]):focus, .form-field select:not([readonly]):focus {
  outline:0;
}

.form-field input.required:not(.no-ico), .form-field textarea.required:not(.no-ico), .form-field select.required,
.form-field input[required]:not(.no-ico), .form-field textarea[required]:not(.no-ico), .form-field select[required] {
  background-position: calc(100% - 5px) 5px;
  background-repeat: no-repeat;
}


/* ##### CHECKBOX ##### */
.form-field.checkbox input[type=checkbox],
.form-field.checkbox input[type=radio] {
  opacity: 0;
  position: absolute;
  width: 0;
  height: 0;
}

.form-field.checkbox {
  position:relative;
}

.form-field.checkbox label:not(.error) {
  text-transform: none;
  position: relative;
  display: inline-block;
  cursor:pointer;
  padding:0 0 0 40px;
  margin:0;
  font-size: 16px;
  line-height: 1.4;
}
.form-field.checkbox label:not(.error):before {
  content: '';
  position: absolute;
  left: 0;
  top: 1px;
  width: 21px;
  height: 20px;
  border: 1px solid var(--color-text);
}

/* checked mark aspect */
.form-field.checkbox input[type="checkbox"] + label:after,
.form-field.checkbox input[type="radio"] + label:after {
  content: '\f00c';
  position: absolute;
  top: 2px;
  left: 0;
  font-family:"Font Awesome 6 Free";
  color: var(--color-text);
  width: 21px;
  height: 20px;
  line-height: 21px;
  font-size: 16px;
  text-align: center;
  opacity: 0;
  transform: scale(0);
  transition: all 0.2s ease-in-out;
}
.form-field.checkbox input[type="radio"] + label:after {
  top: 4px;
  left: 2px;
}
.form-field.checkbox input[type="radio"] + label:not(.error):before {
  width: 25px;
  height: 25px;
  border-radius: 50%;
}
.form-field.checkbox input[type="checkbox"]:checked + label:after,
.form-field.checkbox input[type="radio"]:checked + label:after {
  opacity: 1;
  transform: scale(1);
}

/* accessibility */
.form-field.checkbox input[type="checkbox"]:checked:focus + label:before,
.form-field.checkbox input[type="checkbox"]:not(:checked):focus + label:before {
  border-color: var(--color-text);
}

.form-field.checkbox input[type="checkbox"][disabled] + label,
.form-field.checkbox input[type="radio"][disabled] + label {
  opacity: 0.6;
  cursor: not-allowed;
}
.form-field.checkbox input[type="checkbox"].error + label:not(.error)::before,
.form-field.checkbox input[type="radio"].error + label:not(.error)::before {
  border-color: var(--color-error);
}


/* ##### RADIO ##### */
.form-field.radio input[type="radio"] {
  opacity: 0;
  position: absolute;
  width: 0;
  height: 0;
}

.form-field.radio label:not(.error) {
  position: relative;
  display: inline-block;
  cursor:pointer;
  padding:0 0 0 30px;
  margin:0;
  font-size: 16px;
  line-height: 1.4;
  text-transform: none;
}
.form-field.radio.small label:not(.error){font-size: 14px;}

.form-field.radio label:not(.error):before {
  content: '';
  position: absolute;
  left: 0;
  top: 1px;
  width: 20px;
  height: 20px;
  border: 1px solid var(--color-text);
  border-radius: 50%;
}

/* checked mark aspect changes */
.form-field.radio input[type="radio"]:checked + label:after {
  content: '';
  position: absolute;
  top: 5px;
  left: 4px;
  background: var(--color-secondary);
  width: 12px;
  height: 12px;
  border-radius: 50%;
}

.form-field.radio input[type="radio"]:not(:checked) + label:after {
  opacity: 0;
  transform: scale(0);
  transition: all 0.2s ease-in-out;
}
.form-field.radio input[type="radio"]:checked + label:after {
  opacity: 1;
  transform: scale(1);
}

.form-field.radio input[type="radio"].error + label {
  box-shadow: 0 0 5px rgba(255, 0, 0, 0.5);
}

/* accessibility */
.form-field [type="radio"]:focus + label:before {
  border-color: var(--color-secondary);
}


/* ##### VALIDATE ERROR ##### */
input.error:not([disabled]), textarea.error:not([disabled]), select.error {border-color:var(--color-error) !important;}

label.error {display:none; color:var(--color-error); font-size:12px !important; line-height:normal !important; font-weight:normal; margin:5px 0 0;}
label.error.v2 {position: absolute; bottom: -15px; left: 0;}
label[generated="true"] {display:inline-block;}

.hidden-submit {
  left: -10000px;
  opacity: 0;
  position: absolute;
  top: -10000px;
}

.input-hidden {height: 0; padding: 0; opacity: 0; width: 0;}

input[readonly="readonly"], input[readonly], input[disabled="disabled"], input[disabled] {
  background-color:#F6F6F6 !important;
  color:#989593 !important;
  border-color: #cfcfcf !important;
}

::-webkit-input-placeholder {color: #c2c2c2;}
:-moz-placeholder {color: #c2c2c2;}
::-moz-placeholder {color: #c2c2c2;}
:-ms-input-placeholder {color: #c2c2c2;}