/*
 * DO NOT EDIT THIS FILE.
 * See the following change record for more information,
 * https://www.drupal.org/node/2815083
 * @preserve
 */

/**
 * @file
 * Main form and form item styles.
 */

:-ms-input-placeholder {
  color: #8e929c;
}

::placeholder {
  color: #8e929c;
}

/* IE 10 and 11 needs this set as important. */

:-ms-input-placeholder {
  color: #8e929c !important;
}

/*fix form font-family*/
input, textarea, select, option {
font-family:inherit;
}

/**
 * General form item.
 */

.form-item {
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
}

.form-item .form-item {
  border-bottom: 0;
}

.form-item input,
.form-item select {
  font-size: 0.75em;
  line-height: 1.5em;
  padding: 7px 0px;
  max-width: 80%;
}

@media screen and (min-width: 480px) {

  .form-item input, .form-item select {
    font-size: 0.75em;
    line-height: 1.5em;
    padding: 7px 0px;
    max-width: 100%;
  }
}
.form-item label,
.form-item.webform-select-other .fieldset-legend  {
  text-align: justify;
  display: inline-block !important;
  margin-right: 14px;
}

/**
 * When a table row or a container-inline has a single form item, prevent it
 * from adding unnecessary extra spacing.
 * If it has multiple form items, allow spacing between them, overriding Classy.
 */

tr .form-item,
.container-inline .form-item {
  margin-top: 0.75rem;
  margin-bottom: 0.75rem;
}

/**
 * Form element label.
 */

.form-item__label {
  display: table;
  margin-top: 0.25rem; /* 4px */
  margin-bottom: 0.25rem; /* 4px */
  font-size: 0.889rem; /* ~14px */
  font-weight: bold;
  line-height: 1.125rem; /* 18px */
}

.form-item__label--multiple-value-form {
  margin-top: 0;
  margin-bottom: 0;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}

.form-item__label[for] {
  cursor: pointer;
}

.form-item__label.option {
  display: inline;
  font-weight: normal;
}

/* Label states. */

.form-item__label.has-error {
  color: #d72222;
}

.form-item__label.option.has-error {
  color: inherit;
}

.form-item__label.is-disabled {
  cursor: default; /* @todo ...or auto? */
  color: #82828c;
}

.form-item .form-required::after {
  display: inline-block;
  margin-right: 0.15em;
  margin-left: 0.15em;
  content: "*";
  color: #d72222;
  font-size: 0.875rem;
}

.webform-required {
  font-size:70%;
}

/**
 * Form item description.
 */

.form-item__description {
  margin-top: 0.375rem; /* 6px */
  margin-bottom: 0.375rem; /* 6px */
  color: #545560;
  font-size: 0.79rem; /* ~13px */
  line-height: 1.0625rem; /* 17px */
}

/* Description states. */

.form-item__description.is-disabled {
  color: #82828c;
}

/**
 * Error message (Inline form errors).
 */

.form-item__error-message {
  margin-top: 0.375rem; /* 6px */
  margin-bottom: 0.375rem; /* 6px */
  color: #d72222;
  font-size: 0.79rem; /* ~13px */
  font-weight: normal;
  line-height: 1.0625rem; /* 17px */
}

.form-item__prefix.is-disabled,
.form-item__suffix.is-disabled {
  color: #82828c;
}

/* Add some spacing so that the focus ring and suffix don't overlap. */

@media screen and (min-width: 601px) {
  .form-item__suffix {
    margin-left: 0.5rem; /* LTR */
  }

  [dir="rtl"] .form-item__suffix {
    margin-right: 0.5rem;
    margin-left: 0;
  }
}

/**
 * Form actions.
 */

.form-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  margin-top: 1rem;
  margin-bottom: 1rem;
}

.form-actions .button,
.form-actions .action-link {
  margin-top: 1rem;
  margin-bottom: 1rem;
}

.form-actions .ajax-progress--throbber {
  align-self: center;
}

/**
 * Password module.
 *
 * @legacy
 * @todo These should be in a standalone component file.
 */

.confirm-parent,
.password-parent {
  overflow: visible;
  width: auto;
}

.form-item-options-group-info-identifier,
.form-item-pass .description {
  clear: both;
}

/**
 * Custom label placement for editor filter format select.
 */

.form-item--editor-format {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  max-width: 100%;
}

.form-item--editor-format .form-item__label,
.form-item--editor-format .form-item__prefix,
.form-item--editor-format .form-item__suffix,
.form-item--editor-format .form-element--editor-format {
  min-width: 1px;
}

.form-item--editor-format .form-item__label,
.form-item--editor-format .form-item__prefix,
.form-item--editor-format .form-item__suffix {
  margin-right: 0.5rem; /* LTR */
}

[dir="rtl"] .form-item--editor-format .form-item__label,
[dir="rtl"] .form-item--editor-format .form-item__prefix,
[dir="rtl"] .form-item--editor-format .form-item__suffix {
  margin-right: 0;
  margin-left: 0.5rem;
}

.form-item--editor-format .form-item__description,
.form-item--editor-format .form-item__error-message {
  flex: 0 1 100%;
  min-width: 1px;
}

/**
 * Improve form element usability on narrow devices.
 *
 * @legacy
 */

@media screen and (max-width: 600px) {
  .password-strength {
    width: 100%;
  }
  div.form-item div.password-suggestions {
    float: none;
  }
  fieldset {
  padding: 0 !important;
  }
}


/*extraz pieterm*/
.form-item {
  margin-top: 1rem;
  margin-bottom: 1rem;
}

.form-item input[type="submit"] {
  padding: 2px !important;
  font-size: 85%;
  font-family: "PannoTextLight",Arial,sans-serif;
  margin-right: 7px;
  min-width: auto;
}

.form-item * {
  margin-top: 7px !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;

}

.form-composite.webform-fieldset--title-inline legend {
  float: none;
  margin: 0 0.5em 0.4em 0;
  display:contents;
}

.webform-element-description {
  font-size:80%;
}

details.closed {
  cursor:pointer;
}

input[type="submit"] {
  padding: 2px 7px 0px 7px !important;
  font-size: 125%;
  font-family: "PannoTextLight",Arial,sans-serif;
  margin-right: 7px;
  min-width: 25%;
}


.form-item input[type="submit"] {
  padding: 2px !important;
  font-size: 85%;
  font-family: "PannoTextLight",Arial,sans-serif;
  margin-right: 7px;
  min-width: auto;
}


.webform-image-file > label {
  width: 356px;
  display: inline-block;
  padding: 48px 14px !important;
  background-color: #00a0bb;
  color:#000;
}

.webform-image-file > label:hover {
    background-color: #ccc;
}

.webform-image-file > label::after {
  content: url('../images/picture_128.png');
  position: absolute;
  top: 0px;
  right: 5px;
}

.form-item--error-message {
  background: red;
  color: #fff;
  padding: 14px;
  font-size: 28px;
}

.webform-table {
  width: 100%;
}

.tabledrag-toggle-weight-wrapper,
.webform-multiple-table--operations.webform-multiple-table--operations-two {
  display:none;
}

.tablesaw-stack tbody td, .tablesaw-stack tbody th {
  max-width: 100vw;
}

.colored summary {
  background-color: #fff200;
}

[dataclass="hidden"] {
  visibility: hidden !important;
}

/* preview page */

.webform-submission-data--view-mode-preview .webform-element-type-webform-table > label{
  display:none !important;
}

.webform-submission-data--view-mode-preview table {
  width:100%;
}

.webform-submission-data--view-mode-preview .form-item {
  border-bottom: 1px solid #a0a0a0;
}

#edit-actions-submit {
  background: darkgreen;
}

.form-managed-file .button {
  background: none;
  color: #000;
  text-transform: none;
}

details {
  border: 1px solid #a0a0a0;
  padding: 1%;
}


@media(hover: hover) and (pointer: fine) {
  #edit-foto-s-van-de-schelpen label:hover {
    background-color: #ccc;
  }
}