/**
 * Styles for contact form widget.
 *
 * Tablet: 
 * Mobile: 
 */

.tfco-form-wrapper form.tfco-contact-form > .tfco-fields-area {
    display: flex;
    flex-wrap: wrap;
}
form.tfco-contact-form > .tfco-fields-area > .tfco-field-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    flex-basis: 50%;
    width: 50%;
}
form.tfco-contact-form > .tfco-fields-area > .tfco-field-wrapper.tfco-no-display {
    display: none;
}
form.tfco-contact-form > .tfco-fields-area > .tfco-field-wrapper.width-10 { width: 10%; flex-basis: 10%; }
form.tfco-contact-form > .tfco-fields-area > .tfco-field-wrapper.width-15 { width: 15%; flex-basis: 15%; }
form.tfco-contact-form > .tfco-fields-area > .tfco-field-wrapper.width-20 { width: 20%; flex-basis: 20%; }
form.tfco-contact-form > .tfco-fields-area > .tfco-field-wrapper.width-25 { width: 25%; flex-basis: 25%; }
form.tfco-contact-form > .tfco-fields-area > .tfco-field-wrapper.width-30 { width: 30%; flex-basis: 30%; }
form.tfco-contact-form > .tfco-fields-area > .tfco-field-wrapper.width-33 { width: 33.333%; flex-basis: 33.333%; }
form.tfco-contact-form > .tfco-fields-area > .tfco-field-wrapper.width-40 { width: 40%; flex-basis: 40%; }
form.tfco-contact-form > .tfco-fields-area > .tfco-field-wrapper.width-50 { width: 50%; flex-basis: 50%; }
form.tfco-contact-form > .tfco-fields-area > .tfco-field-wrapper.width-60 { width: 60%; flex-basis: 60%; }
form.tfco-contact-form > .tfco-fields-area > .tfco-field-wrapper.width-66 { width: 66.666%; flex-basis: 66.666%; }
form.tfco-contact-form > .tfco-fields-area > .tfco-field-wrapper.width-70 { width: 70%; flex-basis: 70%; }
form.tfco-contact-form > .tfco-fields-area > .tfco-field-wrapper.width-75 { width: 75%; flex-basis: 75%; }
form.tfco-contact-form > .tfco-fields-area > .tfco-field-wrapper.width-80 { width: 80%; flex-basis: 80%; }
form.tfco-contact-form > .tfco-fields-area > .tfco-field-wrapper.width-85 { width: 85%; flex-basis: 85%; }
form.tfco-contact-form > .tfco-fields-area > .tfco-field-wrapper.width-90 { width: 90%; flex-basis: 90%; }
form.tfco-contact-form > .tfco-fields-area > .tfco-field-wrapper.width-100 { width: 100%; flex-basis: 100%; }
/* Tablet */
@media (max-width: 1024px) {
  form.tfco-contact-form > .tfco-fields-area > .tfco-field-wrapper.width-tab-10 { width: 10%; flex-basis: 10%; }
  form.tfco-contact-form > .tfco-fields-area > .tfco-field-wrapper.width-tab-15 { width: 15%; flex-basis: 15%; }
  form.tfco-contact-form > .tfco-fields-area > .tfco-field-wrapper.width-tab-20 { width: 20%; flex-basis: 20%; }
  form.tfco-contact-form > .tfco-fields-area > .tfco-field-wrapper.width-tab-25 { width: 25%; flex-basis: 25%; }
  form.tfco-contact-form > .tfco-fields-area > .tfco-field-wrapper.width-tab-30 { width: 30%; flex-basis: 30%; }
  form.tfco-contact-form > .tfco-fields-area > .tfco-field-wrapper.width-tab-33 { width: 33.333%; flex-basis: 33.333%; }
  form.tfco-contact-form > .tfco-fields-area > .tfco-field-wrapper.width-tab-40 { width: 40%; flex-basis: 40%; }
  form.tfco-contact-form > .tfco-fields-area > .tfco-field-wrapper.width-tab-50 { width: 50%; flex-basis: 50%; }
  form.tfco-contact-form > .tfco-fields-area > .tfco-field-wrapper.width-tab-60 { width: 60%; flex-basis: 60%; }
  form.tfco-contact-form > .tfco-fields-area > .tfco-field-wrapper.width-tab-66 { width: 66.666%; flex-basis: 66.666%; }
  form.tfco-contact-form > .tfco-fields-area > .tfco-field-wrapper.width-tab-70 { width: 70%; flex-basis: 70%; }
  form.tfco-contact-form > .tfco-fields-area > .tfco-field-wrapper.width-tab-75 { width: 75%; flex-basis: 75%; }
  form.tfco-contact-form > .tfco-fields-area > .tfco-field-wrapper.width-tab-80 { width: 80%; flex-basis: 80%; }
  form.tfco-contact-form > .tfco-fields-area > .tfco-field-wrapper.width-tab-85 { width: 85%; flex-basis: 85%; }
  form.tfco-contact-form > .tfco-fields-area > .tfco-field-wrapper.width-tab-90 { width: 90%; flex-basis: 90%; }
  form.tfco-contact-form > .tfco-fields-area > .tfco-field-wrapper.width-tab-100 { width: 100%; flex-basis: 100%; }
}
/* Mobile */
@media (max-width: 767px) {
  form.tfco-contact-form > .tfco-fields-area > .tfco-field-wrapper.width-mob-10 { width: 10%; flex-basis: 10%; }
  form.tfco-contact-form > .tfco-fields-area > .tfco-field-wrapper.width-mob-15 { width: 15%; flex-basis: 15%; }
  form.tfco-contact-form > .tfco-fields-area > .tfco-field-wrapper.width-mob-20 { width: 20%; flex-basis: 20%; }
  form.tfco-contact-form > .tfco-fields-area > .tfco-field-wrapper.width-mob-25 { width: 25%; flex-basis: 25%; }
  form.tfco-contact-form > .tfco-fields-area > .tfco-field-wrapper.width-mob-30 { width: 30%; flex-basis: 30%; }
  form.tfco-contact-form > .tfco-fields-area > .tfco-field-wrapper.width-mob-33 { width: 33.333%; flex-basis: 33.333%; }
  form.tfco-contact-form > .tfco-fields-area > .tfco-field-wrapper.width-mob-40 { width: 40%; flex-basis: 40%; }
  form.tfco-contact-form > .tfco-fields-area > .tfco-field-wrapper.width-mob-50 { width: 50%; flex-basis: 50%; }
  form.tfco-contact-form > .tfco-fields-area > .tfco-field-wrapper.width-mob-60 { width: 60%; flex-basis: 60%; }
  form.tfco-contact-form > .tfco-fields-area > .tfco-field-wrapper.width-mob-66 { width: 66.666%; flex-basis: 66.666%; }
  form.tfco-contact-form > .tfco-fields-area > .tfco-field-wrapper.width-mob-70 { width: 70%; flex-basis: 70%; }
  form.tfco-contact-form > .tfco-fields-area > .tfco-field-wrapper.width-mob-75 { width: 75%; flex-basis: 75%; }
  form.tfco-contact-form > .tfco-fields-area > .tfco-field-wrapper.width-mob-80 { width: 80%; flex-basis: 80%; }
  form.tfco-contact-form > .tfco-fields-area > .tfco-field-wrapper.width-mob-85 { width: 85%; flex-basis: 85%; }
  form.tfco-contact-form > .tfco-fields-area > .tfco-field-wrapper.width-mob-90 { width: 90%; flex-basis: 90%; }
  form.tfco-contact-form > .tfco-fields-area > .tfco-field-wrapper.width-mob-100 { width: 100%; flex-basis: 100%; }
}

form.tfco-contact-form > .tfco-fields-area > .tfco-field-wrapper.full-width {
    flex-basis: 100%;
    width: 100%;
}
@media (max-width: 1024px) {
    form.tfco-contact-form > .tfco-fields-area > .tfco-field-wrapper.full-width-tablet {
        flex-basis: 100%;
        width: 100%;
    }
}
@media (max-width: 767px) {
    form.tfco-contact-form > .tfco-fields-area > .tfco-field-wrapper.full-width-mobile {
        flex-basis: 100%;
        width: 100%;
    }
}
form.tfco-contact-form > .tfco-fields-area > .tfco-field-wrapper > label {
    display: block;
    text-align: left;
    line-height: 1.6666;
}

form.tfco-contact-form > .tfco-fields-area > .tfco-field-wrapper.tfco-textual-field > .tfco-input-wrapper > .tfco-input-elem {
    min-height: 40px;
    padding: 5px 14px;
    border: 1px solid #69727d; /* TODO: back-end setting */
    border-radius: 3px;
    vertical-align: middle;
}
form.tfco-contact-form > .tfco-fields-area > .tfco-field-wrapper.tfco-textual-field > .tfco-input-wrapper > .tfco-input-elem::placeholder {
    color: #A3A3A3; /* TODO: back-end setting */
}

/* Text input fields. */
form.tfco-contact-form > .tfco-fields-area > .tfco-field-wrapper > .tfco-input-wrapper > input {
    width: 100%;
    line-height: 1.4;
}
form.tfco-contact-form > .tfco-fields-area > .tfco-field-wrapper > .tfco-input-wrapper > textarea {
    width: 100%;
}
form.tfco-contact-form > .tfco-fields-area > .tfco-field-wrapper > .tfco-input-wrapper > select {
    width: 100%;
}
form.tfco-contact-form > .tfco-fields-area > .tfco-field-wrapper > .tfco-input-wrapper > .tfco-field-group-radio {
    display: flex;
    flex-wrap: wrap;
}
form.tfco-contact-form > .tfco-fields-area > .tfco-field-wrapper > .tfco-input-wrapper > .tfco-field-group-radio > span.tfco-radio-option {
    display: flex;
    column-gap: 4px;
    text-align: left;
}
form.tfco-contact-form > .tfco-fields-area > .tfco-field-wrapper > .tfco-input-wrapper > .tfco-field-group-radio.tfco-field-group-inline > span.tfco-radio-option {
    padding-inline-end: 10px;
}
form.tfco-contact-form > .tfco-fields-area > .tfco-field-wrapper > .tfco-input-wrapper > .tfco-field-group-radio:not(.tfco-field-group-inline) > span.tfco-radio-option {
    flex-basis: 100%;
}

/* TODO: captcha field? */
/* form.tfco-contact-form > .tfco-fields-area > .tfco-captcha-wrapper */

/* Submit button */
form.tfco-contact-form > .tfco-fields-area > .tfco-submit-wrapper {
    padding: 0 40px;
    margin-top: 15px;
}
form.tfco-contact-form > .tfco-fields-area > .tfco-submit-wrapper > .tfco-input-wrapper > button.tfco-submit {
    position: relative;
    width: 100%;
    min-height: 40%;
    cursor: pointer;
}
form.tfco-contact-form > .tfco-fields-area > .tfco-submit-wrapper > .tfco-input-wrapper > button.tfco-submit:disabled {
    background-color: #CCCCCC !important; /* TODO: back-end setting */
}
form.tfco-contact-form > .tfco-fields-area > .tfco-submit-wrapper > .tfco-input-wrapper > button.tfco-submit > .tfco-loading-spinner {
    display: none;
    position: absolute;
    top: 50%;
    right: 10px;
    width: 20px;
    height: 20px;
    border: 2px solid rgba(255, 255, 255, 0.3); /* TODO: back-end setting */
    border-radius: 50%;
    border-top-color: #FFFFFF; /* TODO: back-end setting */
    transform: translateY(-50%);
    animation: tfco-loading-spin 1s ease-in-out infinite;
}
@keyframes tfco-loading-spin {
    to { transform: translateY(-50%) rotate(360deg); }
}
form.tfco-contact-form > .tfco-fields-area > .tfco-submit-wrapper > .tfco-input-wrapper > button.tfco-submit.tfco-loading > .tfco-loading-spinner {
    display: block;
}