/**
 * Style 'readonly' inputs different.
 */
input[readonly], input.vl-input-field[readonly], select[readonly], select.vl-select[readonly] {
  opacity: 0.55;
  background-color: #333;
  color: white;
}

/**
 * Define some much used colors.
 */
:root {
  /* Normal variants */
  --warning: #ff8c00;
  --gray: #f3f5f6;
  --peach: #F5DEB3;
  --salmon: #FFA07A;
  --white: white;
  --color-bgblue-hover: #f5f8ff;
  /* Light variants */
  --warning-light: hsl(35, 100%, 90%);
  --gray-light: #f7f9fa;
  --peach-light: #FFE5CC;
  --salmon-light: #FFCBA4;
  /* Dark variants */
  --warning-dark: #cc7000;
  --gray-dark: #e0e5e8;
  --peach-dark: #E6CBA7;
  --salmon-dark: #CC7A4B;
}

/**
 * Style (possible) prefileld Webform ui elements different.
 */
tr.webform-ui-element-row.prefilled-field {
  border: 1px dashed var(--warning);
  background: linear-gradient(45deg, white 25%, var(--warning-light) 25%, var(--warning-light) 50%, white 50%, white 75%, var(--warning-light) 75%);
  background-size: 50px 50px;
}
tr.webform-ui-element-row.prefilled-field:hover {
  background: linear-gradient(45deg, var(--color-bgblue-hover) 25%, var(--warning-light) 25%, var(--warning-light) 50%, var(--color-bgblue-hover) 50%, var(--color-bgblue-hover) 75%, var(--warning-light) 75%);
  background-size: 50px 50px;
}
tr.webform-ui-element-row.prefilled-field.odd {
  border-color: var(--warning);
  background: linear-gradient(45deg, var(--warning-light) 25%, white 25%, white 50%, var(--warning-light) 50%, var(--warning-light) 75%, white 75%);
  background-size: 50px 50px;
}
tr.webform-ui-element-row.prefilled-field.odd:hover {
  background: linear-gradient(45deg, var(--warning-light) 25%, var(--color-bgblue-hover) 25%, var(--color-bgblue-hover) 50%, var(--warning-light) 50%, var(--warning-light) 75%, var(--color-bgblue-hover) 75%);
  background-size: 50px 50px;
}
tr.webform-ui-element-row.prefilled-field.limited-access {
  background: linear-gradient(45deg, white 25%, var(--gray) 25%, var(--gray) 50%, white 50%, white 75%, var(--gray) 75%);
  background-size: 20px 20px;
}
tr.webform-ui-element-row.prefilled-field.limited-access:hover {
  background: linear-gradient(45deg, white 25%, var(--gray-dark) 25%, var(--gray-dark) 50%, white 50%, white 75%, var(--gray-dark) 75%);
  background-size: 20px 20px;
}
tr.webform-ui-element-row.prefilled-field.limited-access.odd {
  background: linear-gradient(45deg, var(--gray) 25%, white 25%, white 50%, var(--gray) 50%, var(--gray) 75%, white 75%);
  background-size: 20px 20px;
}
tr.webform-ui-element-row.prefilled-field.limited-access.odd:hover {
  background: linear-gradient(45deg, var(--gray-dark) 25%, white 25%, white 50%, var(--gray-dark) 50%, var(--gray-dark) 75%, white 75%);
  background-size: 20px 20px;
}

/*# sourceMappingURL=sophie-prefilled-webforms.css.map */