/* TODO */

.update2022 .form_row {
  display:flex;
  flex-wrap: wrap;
  align-items: baseline;
  padding: 28px 0 0;
}
.update2022 .form_row.no_padding_top {
  padding-top: 0;
}
.update2022 .vraag_formulier .form_row legend + .field {
  margin-left: 0;
}
.update2022 .vraag_formulier input {
  margin-bottom: 0;
}
.update2022 .vraag_formulier label {
  font-weight: normal;
  padding: 0.5em 1em;
  margin-bottom: 0;
}
.update2022 .vraag_formulier textarea {
  margin-bottom: 0;
}
.update2022 .vraag_formulier input:disabled {
  background-color: rgba(0,0,0,0.1);
  color:#000;
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button
{
  /* -webkit-appearance: none;
  margin: 0; */
  margin-right: -0.5em;
  /* margin: -0.5em -1em -0.5em 0; */
  /* min-height:40px; */
}


/* Floating labels */
/* Source: https://codepen.io/team/css-tricks/pen/XVBLRM */
.update2022 .field {
  display: flex;
  flex-flow: column-reverse;
}
.update2022 .field label,
.update2022 .field input {
  transition: all 0.2s;
  touch-action: manipulation;
}
.update2022 .field input {
  font-family: inherit;
  -webkit-appearance: none;
  cursor: text;
}
.update2022 .field input + label {
  transform-origin: left bottom;
  margin-top: -33px;
  /* margin-bottom: 0; */
}

.update2022 .field input::placeholder{
  color: transparent;
}

/* Show label as placeholder */
.update2022 .field input:placeholder-shown + label {
  cursor: text;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transform: translate(0, 34px) scale(1);
}
/* Show label as label when input is focused */
.update2022 .field input:not(:placeholder-shown) + label,
.update2022 .field input:focus + label {
  transform: translate(-5px, 6px) scale(1);
  cursor: pointer;
}
/* Hide/show placeholder */
.update2022 .field ::-webkit-input-placeholder {
  opacity: 0;
  transition: inherit;
}
.update2022 .field input:focus::-webkit-input-placeholder {
  opacity: 1;
}

/* Display required mark */
.update2022 input:required + label::after {
  display: inline;
  content:"*";
}

/* radio's and checkboxes */
.update2022 .vraag_formulier input[type="checkbox"],
.update2022 .vraag_formulier input[type="radio"] {
  margin: .5em;
}
.update2022 .vraag_formulier input[type="checkbox"] + label,
.update2022 .vraag_formulier input[type="radio"] + label {
  padding: 0.5em 1em 0.5em 2.2em;
  margin-left: -2.2em;
  line-height: 1.7;
}

/* make checkboxes focusable */
input[type="checkbox"]:focus + label {
  outline: auto; outline-color: -webkit-focus-ring-color;
}


.grecaptcha-badge {
  margin-bottom: 1em;
}

#categorie-form {
  margin-bottom: 1em;
}