input,
select,
textarea {
    padding: .5rem;
    border: 1px solid var(--gray_40);
}
.form-type-textfield input,
.form-type-email input,
.form-tel,
.iti {
    width: 100%;
}
::placeholder {
    color: var(--gray_70);
    font-size: 1rem;
}
.form-submit {
    background-color: var(--royal);
    color: var(--white);
    border-radius: 4px;
    border: 1px solid transparent;
    cursor: pointer;
}
textarea {
  width: 100%;
  max-width: 100%;
}
textarea, input {
  max-width: 100%;
}
.webform-type-checkboxes legend,
.webform-type-radios legend {
  margin-bottom: 1rem;
}
input[type="checkbox"] + label:before {
  top: .625rem;
  left: 0;
}
input[type="checkbox"] + label {
    line-height: 1.2;
    padding-top: .875rem;
    display: inline-block;
    margin-bottom: 0;
    margin-top: 0;
    padding-left: 2rem;
}
.form-type-checkbox {
  margin: 0;
}
.webform-type-checkboxes .form-checkboxes {
  column-count: 3;
  column-width: 350px;
}
form .border_bottom {
  border-bottom: 1px solid var(--muted_text);
  margin-top: 3rem;
}
.form-required::after {
  display: contents;
  width: 6px;
  height: 6px;
  margin: 0 0.3rem;
  content: "*";
  color: var(--red);
  background-image: unset;
}
.form-item {
    margin: 0 0 1rem;
}
.form-item .container-inline {
    margin: 0;
}
.form-actions {
    margin: 0 0 2rem;
}
.form-type-radio {
    display: inline-block;
    margin-right: 1rem;
    border: 1px solid var(--gray_50);
    border-radius: 8px;
    padding: .4rem 1rem;
}
.form-type-radio input {
    margin-right: 8px;
}
.form-type-select select {
	max-width: 100%;
}
.form-type-date label,
.form-type-number label {
    display: block;
}
.webform-element-description {
    line-height: 1.4;
    padding-top: .5rem;
}
.form-composite > legend {
    font-weight: normal;
}
.fieldset-wrapper .form-item {
    margin-top: 0;
}

/* CONFIRMATION MODAL */
.ui-widget-overlay {
    background-color: rgba(0, 0, 0, .6);
    backdrop-filter: blur(8px);
    opacity: 1;
}
.webform-confirmation-modal {
    background-color: #e1fcf3;
    max-width: 92%
    padding: 0 1.25rem 1.25rem;
    border-radius: 8px;
    box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.14),
              0 3px 14px 2px rgba(0, 0, 0, 0.12),
              0 5px 5px -3px rgba(0, 0, 0, 0.20);
}
.webform-confirmation-modal .ui-widget-header {
    background-color: transparent;
    border: 0 solid transparent;
}
.webform-confirmation-modal .ui-dialog .ui-dialog-titlebar {
    padding: 0;
}
.webform-confirmation-modal .ui-button {
    background-color: transparent;
    border: 0 solid transparent;
}

/* Style for inline forms */
.form--inline .form-item {
  float: left; /* LTR */
  margin-right: 0.5rem; /* LTR */
}
[dir="rtl"] .form--inline .form-item {
  float: right;
  margin-right: 0;
  margin-left: 0.5rem;
}
/* This is required to win over specificity of [dir="rtl"] .form--inline .form-item */
[dir="rtl"] .views-filterable-options-controls .form-item {
  margin-right: 2%;
}
.form--inline .form-item-separator {
  margin-top: 2.3rem;
  margin-right: 1rem; /* LTR */
  margin-left: 0.5rem; /* LTR */
}
[dir="rtl"] .form--inline .form-item-separator {
  margin-right: 0.5rem;
  margin-left: 1em;
}
.form--inline .form-actions {
  clear: left; /* LTR */
}
[dir="rtl"] .form--inline .form-actions {
  clear: right;
}

/* Style for validation error messages */
.error-message {
  color: d0364c;
}

input.error textarea.error {
  border: 1px solid var(--error,#D0364C);
  background-color: #f9dede;
}

/* Default Button Style */ .btn-radio {
  border-color: var(--gray_20); /* Default border color for inputs (Tailwind gray-300) */
  transition: border-color 0.3s ease;
}

/* Active (checked) Button Style */
input[type="radio"]:checked + .btn-radio {
  border-color: var(--royal) !important;
}

/* Checkboxes (added for this site) */

input[type="checkbox"] {
  opacity: 0; /* Make the default checkbox invisible */
  position: absolute; /* Take it out of the document flow */
  z-index: -1; /* Place it behind the label */
}

input[type="checkbox"] + label {
  display: block;
  position: relative;
  margin-top: 0.5rem; 
  padding-left: 2.5rem; 
  height: 3rem;
  line-height: 3rem;
  cursor: pointer;
  background-repeat: no-repeat;
  background-position: left center;
}

input[type="checkbox"] + label:before {
  content: '';
  position: absolute;
  left: 0.5rem;
  top: 50%;
  transform: translateY(-50%);
  width: 1.5rem;
  height: 1.5rem;
  background-color: white;
  border: 2px solid var(--gray_20);
  border-radius: 0.125rem;
}

input[type="checkbox"]:checked + label:before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'><path fill='%230057B8' d='M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z'/></svg>");
  background-position: center;
  background-repeat: no-repeat;
  border-color: var(--royal);
}

/* Text inside label */
input[type="checkbox"] + label span {
  position: absolute;
  left: 2.5rem;
  top: 50%;
  transform: translateY(-50%);
}


/* Errors */
input[type="checkbox"] + label:before {
  z-index: 0;
}

input[type="checkbox"].error + label:before {
  border-color: var(--error,#D0364C);
  background-color: var(--error-light, #FCEEF1);
}

span.text-error {
  display: block;
  margin-top: 0.25rem;
  color: var(--error,#D0364C);
}


form .field-multiple-table {
  margin: 0;
}
form .field-multiple-table .field-multiple-drag {
  width: 30px;
  padding-right: 0; /* LTR */
}
[dir="rtl"] form .field-multiple-table .field-multiple-drag {
  padding-left: 0;
}
form .field-multiple-table .field-multiple-drag .tabledrag-handle {
  padding-right: 0.5rem; /* LTR */
}
[dir="rtl"] form .field-multiple-table .field-multiple-drag .tabledrag-handle {
  padding-right: 0;
  padding-left: 0.5rem;
}
form .field-add-more-submit {
  margin: 0.5rem 0 0;
}

/* Markup generated by Form API */
.form-item,
.form-actions {
  margin-top: 1rem;
  margin-bottom: 1rem;
}
tr.odd .form-item,
tr.even .form-item {
  margin-top: 0;
  margin-bottom: 0;
}
.form-composite > .fieldset-wrapper > .description,
.form-item .description {
  font-size: 0.85rem;
}
label.option {
  display: inline;
  font-weight: normal;
}
.form-composite > legend,
.label {
  display: inline;
  margin: 0;
  padding: 0;
  font-size: inherit;
  font-weight: bold;
}
.form-checkboxes .form-item,
.form-radios .form-item {
  margin-top: 0.4rem;
  margin-bottom: 0.4rem;
}
.form-type-radio .description,
.form-type-checkbox .description {
  margin-left: 2.4rem; /* LTR */
}
[dir="rtl"] .form-type-radio .description,
[dir="rtl"] .form-type-checkbox .description {
  margin-right: 2.4rem;
  margin-left: 0;
}
.marker {
  color: #e00;
}
abbr.tabledrag-changed,
abbr.ajax-changed {
  border-bottom: none;
}
.form-item input.error,
.form-item textarea.error,
.form-item select.error {
  border: 2px solid red;
}

/* Inline error messages */
.form-item--error-message::before {
  display: inline-block;
  width: 14px;
  height: 14px;
  content: "";
  vertical-align: sub;
  background: url(../../images/icons/error.svg) no-repeat;
  background-size: contain;
}