:root {
  /* Form Style */
  --frm-bg-color: #FFFFFF;
  --frm-border-color: #2EE59D;
  --frm-border-width: 1px;
  --frm-border-style: solid;
  --frm-border-radius: 25px;

  /* Form Field Labels */
  --frm-lbl-size: 15px;
  --frm-lbl-weight: 500;
  --frm-lbl-color: rgba(0,0,0,0.7);
  --frm-lbl-family: ; /*empty for default*/
  --frm-lbl-field-spacing: 0px; /* spacing between label and field */

  /* Form Fields */
  --frm-field-txt-color: rgba(0, 0, 0,.6);
  --frm-field-txt-weight: ; /*empty for default*/
  --frm-field-txt-size: 15px;
  --frm-field-bg-color: rgba(204, 249, 231,.2);
  --frm-field-border-width: 1px;
  --frm-field-border-color: rgba(0,0,0,0.3);
  --frm-field-border-style: solid;
  --frm-field-border-radius: 22px;
  --frm-field-vert-padding: 8px;
  --frm-field-spacing: 0px; /* spacing between field sections */
  --frm-field-txt-active-color: rgba(0,0,0,0.7);
  --frm-field-txt-active-size: 16px;
  --frm-field-bg-active-color: rgba(204, 249, 231,.5);
  --frm-field-border-active-width: 1px;
  --frm-field-border-active-color: rgba(0,0,0,0.6);
  --frm-field-border-active-style: solid;
  --frm-field-transition: all 0.1s ease 0s;
  --frm-field-min-height: 35px; /* recommend leaving this */
  --frm-field-height: 44px;
  
  /* Form Button */
  --form-btn-alignment: center;
  --form-btn-width: 100%;
  --form-btn-radius: 999px;
  --form-btn-bg-color: rgba(255, 255, 255);
  --form-btn-txt-color: rgba(0,0,0,0.9);
  --form-btn-txt-size: 14px;
  --form-btn-txt-transform: uppercase;
  --form-btn-transition: all 0.2s ease 0s;
  --form-btn-border-width: 1px;
  --form-btn-border-style: solid;
  --form-btn-border-color: lightgrey;
  --form-btn-shadow: 0px 8px 15px rgba(0, 0, 0, 0.3);
  --form-btn-bg-hover-color: rgba(43, 209, 143,1);
  --form-btn-hover-transform: translateY(-5px);
  --form-btn-txt-hover-color: rgba(0,0,0,0.9);
  --form-btn-border-hover-width: 1px;
  --form-btn-border-hover-style: solid;
  --form-btn-border-hover-color: darkgray;
  --form-btn-hover-shadow: 0px 20px 15px 5px rgba(0, 0, 0, 0.3);
}

/* Form */
.hl-app #form-builder #_builder-form {
  background-color: var(--frm-bg-color) !important;
  border: var(--frm-border-color) var(--frm-border-width) var(--frm-border-style) !important;
  border-radius: var(--frm-border-radius) !important;
  box-shadow: 0px 1px 30px 1px rgba(0, 0, 0, 0.3) !important;
}

/* Field Labels */
.hl-app #form-builder #_builder-form .field-container label {
  font-size: var(--frm-lbl-size) !important;
  font-weight: var(--frm-lbl-weight) !important;
  color: var(--frm-lbl-color) !important;
  font-family: var(--frm-lbl-family) !important;
  margin-bottom: var(--frm-lbl-field-spacing) !important;
}

/* Fields */
.hl-app #form-builder #_builder-form .field-container input[type='text'] {
  height: var(--frm-field-height) !important;
}

.hl-app #form-builder #_builder-form .field-container textarea {
  resize: vertical !important;
}

.hl-app #form-builder #_builder-form .field-container input[type='text'],
.hl-app #form-builder #_builder-form .field-container textarea {
  color: var(--frm-field-txt-color) !important;
  font-weight: var(--frm-field-txt-weight) !important;
  font-size: var(--frm-field-txt-size) !important;
  background-color: var(--frm-field-bg-color) !important;
  border: var(--frm-field-border-width) var(--frm-field-border-color) var(--frm-field-border-style) !important;
  border-radius: var(--frm-field-border-radius) !important;
  transition: var(--frm-field-transition) !important;
  margin-bottom: var(--frm-field-spacing) !important;
  padding-top: var(--frm-field-vert-padding) !important;
  padding-bottom: var(--frm-field-vert-padding) !important;
}
.hl-app #form-builder #_builder-form .field-container input[type='text']:active,
.hl-app #form-builder #_builder-form .field-container input[type='text']:focus,
.hl-app #form-builder #_builder-form .field-container textarea:active,
.hl-app #form-builder #_builder-form .field-container textarea:focus {
  color: var(--frm-field-txt-active-color) !important;
  font-size: var(--frm-field-txt-active-size) !important;
  background-color: var(--frm-field-bg-active-color) !important;
  border: var(--frm-field-border-active-width) var(--frm-field-border-active-color) var(--frm-field-border-active-style) !important;
}
.hl-app #form-builder #_builder-form .field-container input[type='text']::placeholder,
.hl-app #form-builder #_builder-form .field-container textarea::placeholder {
  color: transparent !important;
}
.hl-app #form-builder #_builder-form .field-container input[type='text']:focus::placeholder,
.hl-app #form-builder #_builder-form .field-container textarea:focus::placeholder {
  color: transparent !important;
}

/* Button */
.hl-app .form-builder--btn-submit:not(.loader-submit) {
  text-align: var(--form-btn-alignment) !important;
}
.hl-app .form-builder--btn-submit div:not(.loader-submit) {
  width: 100% !important;
}
.hl-app  button.btn-dark:not(.loader-submit) {
  background-color: var(--form-btn-bg-color) !important;
  border-radius: var(--form-btn-radius) !important;
  width: var(--form-btn-width) !important;
  transition: var(--form-btn-transition) !important;
  border: var(--form-btn-border-width) var(--form-btn-border-style) var(--form-btn-border-color) !important;
  box-shadow: var(--form-btn-shadow) !important;
}
.hl-app  button.btn-dark:hover:not(.loader-submit),
.hl-app  button.btn-dark:focus:not(.loader-submit) {
  background-color: var(--form-btn-bg-hover-color) !important;
  transform: var(--form-btn-hover-transform) !important;
  box-shadow: var(--form-btn-hover-shadow) !important;
  border: var(--form-btn-border-hover-width) var(--form-btn-border-hover-style) var(--form-btn-border-hover-color) !important;
}
.hl-app .form-builder--btn-submit div p:not(.loader-submit) {
  color: var(--form-btn-txt-color) !important;
  transition: var(--form-btn-transition) !important;
  font-size: var(--form-btn-txt-size) !important;
  text-transform: var(--form-btn-txt-transform) !important;
}

.hl-app .form-builder--btn-submit div p:hover:not(.loader-submit),
.hl-app .form-builder--btn-submit div p:focus:not(.loader-submit) {
  color: var(--form-btn-txt-hover-color) !important;
}