:root {
  --app-form-height: 44px;
  --app-form-radius: 8px;
  --app-form-font-size: 0.9rem;
  --app-form-bg: #0f0f1a;
  --app-form-bg-focus: #0a0a14;
  --app-form-border: rgba(98, 84, 255, 0.5);
  --app-form-border-hover: rgba(98, 84, 255, 0.7);
  --app-form-border-focus: #6254ff;
  --app-form-text: #e8e8f0;
  --app-form-muted: #6070a8;
  --app-form-shadow-focus: 0 0 0 0.2rem rgba(98, 84, 255, 0.3);
  --app-form-disabled-bg: #1b1b2b;
  --app-form-disabled-text: rgba(232, 232, 240, 0.6);
  --app-form-disabled-border: rgba(98, 84, 255, 0.2);
  --app-form-textarea-min-height: 120px;
}

.app-form-control,
.app-form .form-control {
  height: var(--app-form-height);
  min-height: var(--app-form-height);
  padding: 0 12px;
  font-size: var(--app-form-font-size);
  border-radius: var(--app-form-radius);
  border: 1px solid var(--app-form-border);
  /* background-color: var(--app-form-bg); */
  /* color: var(--app-form-text); */
  box-shadow: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.app-form-control:hover,
.app-form .form-control:hover {
  border-color: var(--app-form-border-hover);
}

.app-form-control:focus,
.app-form .form-control:focus {
  /* background-color: var(--app-form-bg-focus); */
  border-color: var(--app-form-border-focus);
  /* color: var(--app-form-text); */
  box-shadow: var(--app-form-shadow-focus);
}

.app-form-control::placeholder,
.app-form .form-control::placeholder {
  color: var(--app-form-muted);
  opacity: 1;
}

.app-select,
.app-form .form-select {
  height: var(--app-form-height);
  min-height: var(--app-form-height);
  padding: 0 36px 0 12px;
  font-size: var(--app-form-font-size);
  border-radius: var(--app-form-radius);
  border: 1px solid var(--app-form-border);
  background-color: var(--app-form-bg);
  color: var(--app-form-text);
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M0 0l5 6 5-6z' fill='currentColor'/></svg>");
  background-repeat: no-repeat;
  background-size: 10px 6px;
  background-position: right 12px center;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.app-select:hover,
.app-form .form-select:hover {
  border-color: var(--app-form-border-hover);
}

.app-select:focus,
.app-form .form-select:focus {
  background-color: var(--app-form-bg-focus);
  border-color: var(--app-form-border-focus);
  color: var(--app-form-text);
  box-shadow: var(--app-form-shadow-focus);
}

.app-textarea,
.app-form textarea.form-control {
  height: auto;
  min-height: var(--app-form-textarea-min-height);
  padding: 10px 12px;
  resize: vertical;
}

.app-form-control:disabled,
.app-form-control[readonly],
.app-form .form-control:disabled,
.app-form .form-control[readonly],
.app-select:disabled,
.app-form .form-select:disabled {
  background-color: var(--app-form-disabled-bg);
  border-color: var(--app-form-disabled-border);
  color: var(--app-form-disabled-text);
  cursor: not-allowed;
  box-shadow: none;
}

.app-form select.form-select option,
.app-select option {
  background-color: var(--app-form-bg);
  color: var(--app-form-text);
}

.app-input-group .input-group-text,
.app-form .input-group-text {
  background-color: var(--app-form-bg);
  border-color: var(--app-form-border);
  color: var(--app-form-text);
}

.app-form .select2-container {
  /* width: 100% !important; */
}

.app-form .select2-container--classic,
.app-form .select2-container--bootstrap4 {
  background: var(--app-form-bg);
  border-radius: var(--app-form-radius);
}

.app-form .select2-container--classic .select2-selection--single,
.app-form .select2-container--bootstrap4 .select2-selection--single {
  height: var(--app-form-height);
  min-height: var(--app-form-height);
  display: flex;
  align-items: stretch;
  padding: 0;
  border-radius: var(--app-form-radius);
  border: 1px solid var(--app-form-border);
  background: var(--app-form-bg);
  box-sizing: border-box;
}

.app-form .select2-container--classic .select2-selection--single .select2-selection__rendered,
.app-form .select2-container--bootstrap4 .select2-selection--single .select2-selection__rendered {
  display: flex;
  align-items: center;
  height: 100%;
  padding: 0 32px 0 12px;
  margin: 0;
  line-height: normal;
  color: var(--app-form-text);
  box-sizing: border-box;
}

.app-form .select2-container--classic .select2-selection--single .select2-selection__arrow,
.app-form .select2-container--bootstrap4 .select2-selection--single .select2-selection__arrow {
  height: 100%;
  top: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-left: 1px solid rgba(98, 84, 255, 0.3);
  width: 32px;
  background: transparent;
}

.app-form .select2-container--classic.select2-container--open .select2-selection--single,
.app-form .select2-container--classic.select2-container--focus .select2-selection--single,
.app-form .select2-container--bootstrap4.select2-container--open .select2-selection--single,
.app-form .select2-container--bootstrap4.select2-container--focus .select2-selection--single {
  border-color: var(--app-form-border-focus);
  box-shadow: var(--app-form-shadow-focus);
}

.app-form .select2-container--classic .select2-selection--multiple,
.app-form .select2-container--bootstrap4 .select2-selection--multiple {
  min-height: var(--app-form-height);
  padding: 4px 36px 4px 8px;
  border-radius: var(--app-form-radius);
  border: 1px solid var(--app-form-border);
  background: var(--app-form-bg);
}

.app-form .select2-container--classic.select2-container--open .select2-selection--multiple,
.app-form .select2-container--classic.select2-container--focus .select2-selection--multiple,
.app-form .select2-container--bootstrap4.select2-container--open .select2-selection--multiple,
.app-form .select2-container--bootstrap4.select2-container--focus .select2-selection--multiple {
  border-color: var(--app-form-border-focus);
  box-shadow: var(--app-form-shadow-focus);
}

.app-form .select2-container--classic .select2-selection__placeholder,
.app-form .select2-container--bootstrap4 .select2-selection__placeholder {
  color: var(--app-form-muted);
}

.app-form .select2-container--classic .select2-dropdown,
.app-form .select2-container--bootstrap4 .select2-dropdown {
  background: var(--app-form-bg);
  border: 1px solid var(--app-form-border);
  border-radius: var(--app-form-radius);
}

.app-form .select2-container--classic .select2-search--dropdown .select2-search__field,
.app-form .select2-container--bootstrap4 .select2-search--dropdown .select2-search__field {
  background: var(--app-form-bg);
  border: 1px solid var(--app-form-border);
  color: var(--app-form-text);
  border-radius: 6px;
  padding: 8px 12px;
  font-size: 13px;
  outline: none;
}

.app-form .select2-container--classic .select2-search--dropdown .select2-search__field:focus,
.app-form .select2-container--bootstrap4 .select2-search--dropdown .select2-search__field:focus {
  border-color: var(--app-form-border-focus);
  box-shadow: 0 0 0 2px rgba(98, 84, 255, 0.3);
}

.app-form .select2-container--classic .select2-search--dropdown .select2-search__field::placeholder,
.app-form .select2-container--bootstrap4 .select2-search--dropdown .select2-search__field::placeholder {
  color: #7070a0;
  opacity: 1;
}

.app-form .select2-container--classic .select2-results__option,
.app-form .select2-container--bootstrap4 .select2-results__option {
  color: var(--app-form-text);
  padding: 8px 12px;
}

.app-form .select2-container--classic .select2-results__option--highlighted,
.app-form .select2-container--bootstrap4 .select2-results__option--highlighted {
  background: var(--app-form-border-focus);
  color: #fff;
}

.app-form .select2-container--classic .select2-results__option[aria-selected=true],
.app-form .select2-container--bootstrap4 .select2-results__option[aria-selected=true] {
  background: rgba(98, 84, 255, 0.25);
  color: #c0b8ff;
}

.app-form .select2-container--disabled .select2-selection,
.app-form .select2-container--disabled .select2-selection__rendered {
  background: var(--app-form-disabled-bg);
  border-color: var(--app-form-disabled-border);
  color: var(--app-form-disabled-text);
}