.input-validation-error,
.input-validation-error:focus,
.input-validation-error-style,
.input-validation-error-style:focus {
  border: 2px solid var(--color-error) !important;
}
.input-validation-error[type="radio"],
.input-validation-error:focus[type="radio"],
.input-validation-error-style[type="radio"],
.input-validation-error-style:focus[type="radio"] {
  outline: 2px solid var(--color-error) !important;
}

input[type="checkbox"],
input[type="radio"] {
  margin-right: var(--horizontal-padding-sm);
  vertical-align: middle;
  accent-color: var(--color-accent);
}

textarea {
  border-radius: var(--slight-corner-rounding);
  background: var(--color-primary-background);
  border: var(--border-width) solid var(--color-border);
  font-weight: var(--font-size-semi-bold);
  font-size: var(--font-size-s);
  padding: var(--vertical-padding-sm) var(--horizontal-padding-sm);
  line-height: 1.75rem;
  width: 100%;
}

input[type="text"],
select,
.select2-container,
input[type="date"],
input[type="time"],
input[type="search"],
.blocked-input {
  border-radius: var(--corner-rounding);
  background: var(--color-primary-background);
  border: var(--border-width) solid var(--color-border);
  font-weight: var(--font-size-semi-bold);
  font-size: var(--font-size-s);
  padding: var(--vertical-padding-sm) var(--horizontal-padding-sm);
  line-height: 1rem;
  height: 2.75rem;
  width: 100%;
}

.select2-container {
  line-height: 1.75rem;
}

.blocked-input {
  background: var(--color-secondary-background) !important;
  border: var(--border-width) solid var(--color-border) !important;
}

.multiple {
  height: auto;
}

.select2-container {
  width: 100% !important;
}

.select2-container--open:not(.select2-container--below):not(
    .select2-container--above
  ) {
  width: 0px !important;
  padding: 0;
  outline: none;
  border: none;
}

#actual-form input[type="time"] {
  max-width: 9rem;
}
#actual-form input[type="date"] {
  max-width: 12rem;
}

.input-wrapper {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: var(--horizontal-padding-sm);
  margin-bottom: var(--vertical-padding);
  flex-wrap: wrap;
  width: 100%;
  gap: var(--vertical-padding-sm) var(--horizontal-padding-sm);
}
.input-wrapper > div:not(.input-group):not(.datepicker-calendar) {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex: 1 0 0;
  min-width: 20ch;
  font-size: var(--font-size-s);
}
.input-wrapper
  > div:not(.input-group):not(.datepicker-calendar)
  > div:not(.input-group):not(.datepicker-calendar) {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: var(--horizontal-padding-sm);
  margin-bottom: var(--vertical-padding-sm);
  width: 100%;
}
.input-wrapper
  > div:not(.input-group):not(.datepicker-calendar)
  > div:not(.input-group):not(.datepicker-calendar):last-child {
  margin-bottom: 0;
}

.input-wrapper-validation-error {
  margin-top: 0 !important;
}

@media (max-width: 1080px) {
  .input-wrapper {
    gap: var(--vertical-padding) var(--horizontal-padding-sm);
  }

  .input-wrapper-validation-error {
    margin-top: calc(var(--vertical-padding-sm) - var(--vertical-padding));
  }
}

.select2-search__field {
  margin-bottom: 0 !important;
}

span.select2-selection,
li.select2-selection {
  border: none !important;
  display: flex !important;
  flex-direction: column;
  align-items: flex-start;
}

.select2-selection,
.select2-selection__rendered,
.select2-selection__choice {
  max-width: 100%;
}

.select2-selection__choice__remove,
.select2-selection__clear {
  font-size: var(--font-size-l);
  vertical-align: middle;
  padding-right: 0.5rem;
}

.select2-selection:before {
  content: "";
  position: absolute;
  right: 2ch;
  top: 44%;
  border-top: 5px solid #888;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
}

li.select2-selection__choice {
  max-width: 100%;
  box-sizing: border-box;
  white-space: normal !important;
  word-wrap: break-word !important;
}

.select2-results__option[aria-disabled="true"] {
  display: none;
}

.select2-results__option {
  font-size: var(--font-size-s);
  padding: 0 var(--horizontal-padding-sm);
  line-height: 2rem;
}

.select2-results {
  max-height: 40ch;
  overflow: auto;
}

.add-waste-btn-wrapper {
  padding: var(--vertical-padding) 0;
  border-top: var(--border-width) solid var(--color-border);
  border-bottom: var(--border-width) solid var(--color-border);
}

.add-waste-btn {
  background-color: var(--color-success);
  color: var(--color-text-light);
  border: var(--border-width) solid var(--color-success);
  border-radius: var(--corner-rounding);
}

.add-waste-btn:hover,
.add-waste-btn:focus {
  background: transparent;
  color: var(--color-success);
}

.remove-waste-btn-wrapper {
  margin-bottom: var(--vertical-padding);
}

.remove-waste-btn {
  background-color: var(--color-error);
  color: var(--color-text-light);
  border: var(--border-width) solid var(--color-error);
  border-radius: var(--corner-rounding);
}

.remove-waste-btn:hover,
.remove-waste-btn:focus {
  background: transparent;
  color: var(--color-error);
}

.copy-address-btn {
  background: transparent;
  color: var(--color-success);
  border: var(--border-width) solid var(--color-success);
  border-radius: var(--corner-rounding);
  margin-left: auto;
}

.copy-address-btn:hover,
.copy-address-btn:focus {
  background: var(--color-success);
  color: var(--color-text-light);
}

.selected-property-section input,
.selected-property-section textarea,
.selected-property-section select,
.selected-property-section select2,
.selected-property-section select2-container,
.selected-property-section .select2.select2-container {
  background-color: var(--color-light-blue) !important;
}
.selected-property-section .hide-properties-divider {
  border-left-color: var(--color-accent) !important;
}

.business-id-error-message {
  display: none;
}

.checkbox-label {
  font-weight: var(--font-weight-normal);
}

.datepicker-button {
  border: var(--color-accent);
}

.datepicker-calendar {
  width: auto !important;
}

abbr[title] {
  text-decoration: underline !important;
}

.input-group-text {
  background: var(--color-secondary-background) !important;
  border: var(--border-width) solid var(--color-border);
}

.month.selectable {
  padding: var(--vertical-padding-sm) !important;
}

div.datepicker-calendar.bootstrap4 div.datepicker-month:after {
  opacity: 0;
}

.select2-results__option--highlighted {
  background: var(--color-light-plue);
}