/**
 * Uncomment to customise color of picklists.
 * This is not supported in IE.
 
 :root {
   --picklist-color1: red;
   --picklist-color2: red;
   --picklist-color3: red;
  }
  */

/* Edge supports webkit prefix */
.formic-object[type] input::-webkit-input-placeholder,
.formic-object[type] textarea::-webkit-input-placeholder,
.formic-object[type] input::placeholder,
.formic-object[type] textarea::placeholder {
  color: #c0c0c0;
}

.formic-object--disabled {
  opacity: 0.4;
  pointer-events: none;
  cursor: not-allowed;

}

/* HRO */
.formic-object--highlighted[type="1"] input {
  background: #b0e0e6;
}

/* AIA */
.formic-object--highlighted[type="2"] {

}

/* MIA */
.formic-object--highlighted[type="3"] textarea {
  background: #b0e0e6;
}

/* TBG */
.formic-object--highlighted[type="4"] {
  background: #b0e0e6;
}

/* AIA - ACR */
.formic-object--highlighted[type="21"] {
  background: #b0e0e6;
}

/* AIA - Clock */
.formic-object--highlighted[type="22"] select {
  background: #b0e0e6;
}

/* AIA - Gauge */
.formic-object--highlighted[type="23"] {
  background: #b0e0e6;
}

/* AIA - Segmented */
.formic-object--highlighted[type="24"] {
  border-color: #b0e0e6; 
}

/* AIA - Presence */
.formic-object--highlighted[type="25"] {

}

/**
    We will need to put this in a separate file and find a way of including it
    when the new renderer flag is set.
*/

.formic-page {
    box-sizing: border-box;
    font-family: system-ui;
    font-size: 1rem;
    padding: 20px;
    max-width: 800px;
    margin: 0 auto;
}

/* Scoped to .formic-page to avoid breaking anything else */
.formic-page *, .formic-page *:before, .formic-page *:after {
    box-sizing: inherit;
}

.formic-object-3 {
    margin-bottom: 40px;
}

.formic-object__question-caption {
    display: block; /* only needed because this is currently a <span /> */
    font-size: 1.25rem;
    font-weight: bold;
    margin-bottom: 15px;
}

.formic-field {

}

.formic-field__input {
    font-size: 1rem;
    font-family: inherit;
    padding: 10px;
    border: 1px solid rgba(0, 0, 0, 0.45);
    border-radius: 4px;
    box-shadow: inset 4px 4px 7px -2px rgba(0, 0, 0, 0.1);
}

.formic-object__helper-text {
    margin-top: 10px;
    font-size: 0.75rem;
    color: #666;
}

.formic-object__routing-list {
    display: none;
}

/* TODO: Better selector for MIA textareas */
textarea.formic-field__input {
    width: 100%;
}