fieldset {
  border: solid var(--fieldset-border-width) var(--fieldset-border-color);
  border-radius: var(--fieldset-border-radius);
  padding: var(--fieldset-padding-y) var(--fieldset-padding-x);
  margin-bottom: 1.5rem;
}

fieldset legend {
  font-weight: var(--font-weight-bold);
  padding: 0 0.25rem;
}

fieldset:last-child {
  margin-bottom: 0;
}

label {
  color: var(--label-color);
  display: inline-block;
  margin-bottom: 0.25rem;
}

label + label {
  margin-left: 1rem;
}

input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="color"]):not([type="button"]):not([type="reset"]),
select,
textarea,
textarea[type="text"] {
  width: 100%;
  font-family: var(--input-font-family);
  font-size: var(--input-font-size);
  font-weight: var(--input-font-weight);
  color: var(--input-color);
  border: solid var(--input-border-width) var(--input-border-color);
  border-radius: var(--input-border-radius);
  background-color: var(--input-bg-color);
  line-height: var(--line-height);
  vertical-align: middle;
  display: block;
  padding: var(--input-padding);
  margin: 0;
  transition: var(--component-speed) border-color,
    var(--component-speed) background-color, var(--component-speed) color;
  white-space: nowrap;
  -moz-appearance: none;
  -webkit-appearance: none;
}

input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="color"]):not([type="button"]):not([type="reset"]):focus,
select:focus,
textarea:focus,
textarea[type="text"]:focus {
  outline: none;
  border-color: var(--input-focus-color);
}

input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="color"]):not([type="button"]):not([type="reset"])[disabled],
select[disabled],
textarea[disabled],
textarea[type="text"][disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}

input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="color"]):not([type="button"]):not([type="reset"])[readonly],
select[readonly],
textarea[readonly],
textarea[type="text"][readonly] {
  background-color: var(--input-readonly-bg-color);
}

input[type="checkbox"],
input[type="radio"] {
  vertical-align: 0.0625rem;
}

select {
  position: relative;
  background-image: url("data:image/svg+xml, %3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg width='41px' height='26px' viewBox='0 0 41 26' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cdefs%3E%3C/defs%3E%3Cg id='Page-1' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cpolygon id='Path-3' fill='%23000000' points='0 5.38215461 19.9830489 25.3652035 40.1398855 5.20836689 34.9315186 0 19.8691842 15.0623344 4.83971338 0.0328636246'%3E%3C/polygon%3E%3C/g%3E%3C/svg%3E%0A");
  background-position: right 0.5rem center;
  background-repeat: no-repeat;
  background-size: 0.5rem;
  padding-top: 0;
  padding-bottom: 0;
  padding-right: 0.25rem;
}

textarea {
  height: auto;
  resize: vertical;
  line-height: var(--line-height);
  white-space: normal;
}

.inputField {
  margin-bottom: var(--component-margin-bottom);
}

.inputGroup {
  width: 100%;
  display: flex;
  margin-bottom: var(--component-margin-bottom);
}

.inputGroup > input,
.inputGroup > button,
.inputGroup > .button,
.inputGroup > .inputIcon input,
.inputGroup > .inputIcon select {
  border-radius: 0;
}

.inputGroup > input:first-child,
.inputGroup > button:first-child,
.inputGroup > .button:first-child,
.inputGroup > .inputIcon:first-child input,
.inputGroup > .inputIcon:first-child select {
  border-top-left-radius: var(--input-border-radius);
  border-bottom-left-radius: var(--input-border-radius);
}

.inputGroup > input:last-child,
.inputGroup > button:last-child,
.inputGroup > .button:last-child,
.inputGroup > .inputIcon:last-child input,
.inputGroup > .inputIcon:last-child select {
  border-top-right-radius: var(--input-border-radius);
  border-bottom-right-radius: var(--input-border-radius);
}

.inputGroup > input + input {
  border-left-width: 0;
}

.inputGroup > input + input:focus {
  border-left-width: var(--input-border-width);
  margin-left: calc(var(--input-border-width) * -1);
}

.inputGroup button:focus,
.inputGroup .button:focus {
  transform: translateZ(0);
}

.inputHint {
  font-size: var(--input-hint-font-size);
  color: var(--input-hint-color);
  margin: 0 0 0 0;
  display: block;
}

.inputGroup + .inputHint {
  margin-top: calc(-1 * var(--component-margin-bottom));
  margin-bottom: var(--component-margin-bottom);
}

.inputAddon {
  font-size: var(--input-font-size);
  line-height: var(--line-height);
  border-top: solid var(--input-border-width) var(--input-border-color);
  border-bottom: solid var(--input-border-width) var(--input-border-color);
  background: var(--input-addon-bg-color);
  color: var(--input-addon-color);
  padding: var(--input-padding);
  white-space: nowrap;
}

.inputAddon:first-child {
  border-left: solid var(--input-border-width) var(--input-border-color);
  border-top-left-radius: var(--input-border-radius);
  border-bottom-left-radius: var(--input-border-radius);
}

.inputAddon:last-child {
  border-right: solid var(--input-border-width) var(--input-border-color);
  border-top-right-radius: var(--input-border-radius);
  border-bottom-right-radius: var(--input-border-radius);
}

.inputIcon {
  position: relative;
  width: 100%;
}

.inputIcon select {
  position: static;
}

.inputIcon input:not(:first-child),
.inputIcon select:not(:first-child) {
  padding-left: var(--input-icon-width);
}

.inputIcon input:not(:last-child) {
  padding-right: var(--input-icon-width);
}

.inputIcon:first-child:not(input, select),
.inputIcon:last-child:not(input, select) {
  position: absolute;
  top: 0;
  left: var(--input-icon-offset);
  line-height: var(--line-height);
  color: var(--input-icon-color);
  vertical-align: middle;
  pointer-events: none;
}

.inputIcon:last-child:not(input, select) {
  left: auto;
  right: var(--input-icon-offset);
}

.isInvalid label {
  color: var(--input-invalid-color) !important;
}

.isInvalid input,
.isInvalid select,
.isInvalid textarea {
  color: var(--input-invalid-color) !important;
  border-color: var(--input-invalid-border-color) !important;
}

.isInvalid .inputIcon :first-child:not(input, select),
.isInvalid .inputIcon :last-child:not(input, select) {
  color: var(--input-invalid-color);
}

.isValid label {
  color: var(--input-valid-color) !important;
}

.isValid input,
.isValid select,
.isValid textarea {
  color: var(--input-valid-color) !important;
  border-color: var(--input-valid-border-color) !important;
}

.isValid .inputIcon :first-child:not(input, select),
.isValid .inputIcon :last-child:not(input, select) {
  color: var(--input-valid-color);
}