xarxaprod-wp-theme/sass/plugins/contactform7/_contactform7.scss

/* contact forms styles used in wp backend with CF7 */

.wpcf7-not-valid:not(:focus) {
  background-color: $color__red;
}
.wpcf7-not-valid-tip {
  color: $color__red;
}
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.payment-required .wpcf7-response-output {
  border-color: $color__yellow;
  background-color: $color__yellow;
  color: $color__white;
  font-family: $font__main;
  font-weight: bold;
  text-align: center;
  margin: 0em;
  padding: 0rem;
}
.wpcf7-form {
  .wpcf7-submit {
    margin-left: 1rem;
  }
  .wpcf7-spinner {
    margin: 0 -24px 0 0;
  }
}

.wpcf7-list-item-label {
  margin: 0 0.3rem;
}

/* styles applied if written in wp backend
 * class="contactform contactform-WHATEVER"
 * */
.contactform {
  margin-bottom: 1rem;
  br {
    display: none;
  }
  p {
    display: block;
    break-inside: avoid-column;
    margin-top: 0;
  }
  .break-after-column, .saltar-columna{
    break-after:column;
  }
}
.contactform-consultoria {
  .contactform-name, .contactform-email {
    max-width: 40%;
    display: inline-block;
  }
  .contactform-name {
    float: left;
  }
  .contactform-email {
    float:right;
    margin-bottom: 1rem;
  }
  .contactform-message {
  }
}
.contactform-acceptance {
  display: flex;
  align-items: center;
  justify-content: end;
}
.contactform-fund-info {
  display: inline-block;
  column-count: 2;
  column-gap: 2em;
  width: 100%;
  .contactform-descripcio textarea {
    display: inline-block;
    min-height: 15.5em;
  }
}
.contactform-fund-options {
  display: flex;
  justify-content: space-between;
  p{
    display: inline-block;
  }
  .wpcf7-list-item {
    display:block;
    label {
      display: flex;
      flex-direction: row-reverse;
      justify-content: left;
    }
  }
  .wpcf7-form-control-wrap {
    &[data-name="oferta-data-start"],&[data-name="oferta-data-end"] {
      display: block;
      input[type="date"] {
        width: auto;
        background-color: $color__white;
      }
      &::before {
        display: inline-block;
        width: 2rem;
      }
    }
    &[data-name="oferta-data-start"]::before {
      content:"inici: ";
    }
    &[data-name="oferta-data-end"]::before {
      content:"fi: ";
    }
  }
}