/* legacy/src/assets/eidolic.css, and under it the <style scoped> blocks of the
   legacy/src/eidolic/Ei*.vue wrappers (src/eidolic/*.rs here; EiCenter's went with the
   login page it centred). Vue scoped those to each component with a data attribute;
   here each block is scoped by the wrapper's root class, which the wrapper always
   renders. */

.ei-v-padded {
  padding: 0.3rem 0;
}

.ei-btn-icon {
  margin-top: 18px;
}

.ei-padded > * {
  padding-right: 5px;
}

.ei-flex-grow {
  flex-grow: 1;
}

/* EiTextInput.vue, EiTextarea.vue and EiNumberInput.vue share one layout: a label line,
   the input, an error line — each line 1.2em so the row keeps its height when the label
   or the error is empty. */
.ei-text-input > div,
.ei-number-input > div {
  vertical-align: 20px;
  overflow: hidden;
  width: 100%;
}

.ei-text-input .input,
.ei-number-input .input {
  width: 100%;
}

.ei-text-input .label,
.ei-number-input .label {
  color: #5f5f5f;
}

.ei-text-input .error-message,
.ei-number-input .error-message {
  color: #f56c6c;
}

.ei-text-input .label,
.ei-text-input .error-message,
.ei-number-input .label,
.ei-number-input .error-message,
.ei-select .label,
.ei-select .error-message {
  display: block;
  font-size: 13px;
  line-height: 1.2em;
  height: 1.2em;
}

.ei-text-input .label,
.ei-text-input .error-message,
.ei-number-input .label,
.ei-select .label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}