/* Hide element visually, keeping it focusable (with keyboard) and available for screen-readers */
.FormField {
  box-sizing: border-box;
  clear: both;
  margin-bottom: 32px;
}
.FormField:last-child {
  margin-bottom: 0;
}

.FormField--width-1 {
  width: 8.3333333333%;
}

.FormField--width-2 {
  width: 16.6666666667%;
}

.FormField--width-3 {
  width: 25%;
}

.FormField--width-4 {
  width: 33.3333333333%;
}

.FormField--width-5 {
  width: 41.6666666667%;
}

.FormField--width-6 {
  width: 50%;
}

.FormField--width-7 {
  width: 58.3333333333%;
}

.FormField--width-8 {
  width: 66.6666666667%;
}

.FormField--width-9 {
  width: 75%;
}

.FormField--width-10 {
  width: 83.3333333333%;
}

.FormField--width-11 {
  width: 91.6666666667%;
}

.FormField--width-12 {
  width: 100%;
}

.FormField__errorText {
  color: var(--colorsTextCritical, #bf2a00);
  font-size: 14px;
  line-height: 1.25;
  margin-top: 8px;
}
.FormField__errorText + .FormField__description {
  margin-top: 4px;
}

.FormField__addons {
  /* Set color on root of component. It can be overridden after the @include */
  color: var(--colorsTextDefault, #141414);
  /* Make sure font-family goes across entire component */
  font-family: "Nunito Sans", sans-serif;
  display: flex;
  gap: 16px;
  justify-content: flex-end;
}

.FormField__description,
.FormField__counter {
  color: var(--colorsTextSubdued, #606162);
  font-size: 14px;
  line-height: 1.25;
  margin-top: 8px;
}
.FormField--ToggleSwitch .FormField__description,
.FormField--ToggleSwitch .FormField__counter {
  margin-top: 4px;
}

.FormField__description {
  word-break: break-word;
}

.FormField__label {
  margin-bottom: 8px;
}

.FormField__helpers {
  flex: 100%;
}

.FormField--disabled {
  cursor: not-allowed;
}
.FormField--disabled .FormField__helpers {
  opacity: 0.6;
}

/* Errors on Semantic Dropdown */
.FormField--error .semantic-anvil-theme .ui.dropdown {
  color: var(--colorsTextCritical, #bf2a00);
  background-color: var(--colorsSurfaceCriticalSubdued, #ffece9);
  border-color: var(--colorsBorderCritical, #e13212);
}
.FormField--error .semantic-anvil-theme .ui.dropdown .menu {
  border-color: var(--colorsBorderCritical, #e13212) !important;
  background-color: var(--colorsSurfaceCriticalSubdued, #ffece9);
}
.FormField--error .semantic-anvil-theme .ui.dropdown .menu > .item {
  color: var(--colorsTextCritical, #bf2a00);
}
.FormField--error .semantic-anvil-theme .ui.dropdown .menu > .item.selected {
  background-color: var(--colorsActiveCritical, rgba(225, 50, 18, 0.3));
}
.FormField--error .semantic-anvil-theme .ui.dropdown .menu > .item:hover, .FormField--error .semantic-anvil-theme .ui.dropdown .menu > .item.selected:hover {
  background-color: var(--colorsHoverCritical, rgba(225, 50, 18, 0.1));
  color: var(--colorsTextCritical, #bf2a00);
}
.FormField--error .semantic-anvil-theme .ui.dropdown:focus, .FormField--error .semantic-anvil-theme .ui.dropdown:focus-within {
  box-shadow: 0 0 0 3px var(--colorsFocusRingCritical, #ffb2a0) !important;
}

/* Dropdown Block */
.Form .FormField > .Field__label .selection.dropdown {
  width: 100%;
}

.Form .FormField > .Field__label .selection.dropdown > .dropdown.icon {
  float: right;
}

/* Dropdown Inline */
.Form .FormGroup--inline .FormField > .Field__label .selection.dropdown,
.Form .inline.FormField > .Field__label .selection.dropdown {
  width: auto;
}

.Form .FormGroup--inline .FormField .Field__label .selection.dropdown .dropdown.icon,
.Form .inline.FormField .Field__label .selection.dropdown .dropdown.icon {
  float: none;
}

.Field__html-label {
  width: 100%;
}

.FormField > label {
  display: block;
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: 700;
}

/* Make Inputs behave like Semantic Inputs because legacy reasons */
.FormField .Input {
  width: 100%;
}
.FormField .Input > input {
  width: auto;
}

/*# sourceMappingURL=index.css.map */