:root {
  --cpq-control-primary: #20284e;
  --cpq-control-primary-hover: #1a2141;
  --cpq-control-bg: #ffffff;
  --cpq-control-bg-hover: rgba(32, 40, 78, 0.08);
  --cpq-control-bg-disabled: #e9ecef;
  --cpq-control-border: rgba(32, 40, 78, 0.2);
  --cpq-control-border-muted: #d7e3ec;
  --cpq-control-text: #1f2937;
  --cpq-control-muted: #667085;
  --cpq-control-placeholder: #98a2b3;
  --cpq-control-focus: rgba(32, 40, 78, 0.14);
  --cpq-control-radius: 8px;
  --cpq-control-radius-sm: 7px;
  --cpq-control-height: 38px;
  --cpq-control-height-sm: 32px;
  --cpq-control-height-lg: 44px;
  --cpq-control-font-size: 0.875rem;
}

.form-control:not(.form-control-color),
.form-select {
  min-height: var(--cpq-control-height);
  border-color: var(--cpq-control-border);
  border-radius: var(--cpq-control-radius);
  background-color: var(--cpq-control-bg);
  color: var(--cpq-control-text);
  font-size: var(--cpq-control-font-size);
  box-shadow: none;
  padding-block: 0.42rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

textarea.form-control {
  min-height: 70px;
  resize: vertical;
}

.form-control-sm,
.form-select-sm {
  min-height: var(--cpq-control-height-sm);
  border-radius: var(--cpq-control-radius-sm);
  font-size: 0.8rem;
}

.form-control-lg,
.form-select-lg,
.input-group-lg > .form-control,
.input-group-lg > .form-select,
.input-group-lg > .input-group-text {
  min-height: var(--cpq-control-height-lg);
  border-radius: 10px;
  font-size: 1rem;
}

.form-control:hover:not(:disabled):not([readonly]),
.form-select:hover:not(:disabled) {
  border-color: var(--cpq-control-border);
  background-color: var(--cpq-control-bg-hover);
}

.form-control:focus,
.form-select:focus {
  border-color: var(--cpq-control-primary);
  background-color: var(--cpq-control-bg);
  box-shadow: 0 0 0 0.2rem var(--cpq-control-focus);
  color: var(--cpq-control-text);
}

.form-control:disabled,
.form-select:disabled {
  border-color: var(--cpq-control-border-muted);
  background-color: var(--cpq-control-bg-disabled);
  color: var(--cpq-control-muted);
  cursor: not-allowed;
  opacity: 0.85;
}

.form-control[readonly] {
  border-color: var(--cpq-control-border-muted);
  background-color: #f8fafc;
  color: var(--cpq-control-muted);
  opacity: 1;
}

.form-control::placeholder {
  color: var(--cpq-control-placeholder);
  opacity: 1;
}

.input-group-text {
  min-height: var(--cpq-control-height);
  border-color: var(--cpq-control-border);
  border-radius: var(--cpq-control-radius);
  background-color: var(--cpq-control-primary);
  color: #ffffff;
  font-size: var(--cpq-control-font-size);
  font-weight: 700;
  box-shadow: none;
  padding-block: 0.42rem;
}

.input-group-sm > .form-control,
.input-group-sm > .form-select,
.input-group-sm > .input-group-text {
  min-height: var(--cpq-control-height-sm);
  border-radius: var(--cpq-control-radius-sm);
  font-size: 0.8rem;
}

.input-group > .form-control,
.input-group > .form-select,
.input-group > .input-group-text {
  border-color: var(--cpq-control-border);
}

.form-label,
label.form-label,
.div-select > label {
  color: var(--cpq-control-muted);
  font-size: 0.78rem;
  font-weight: 700;
}

.form-check-input {
  border-color: var(--cpq-control-border);
  box-shadow: none;
}

.form-check-input:focus {
  border-color: var(--cpq-control-primary);
  box-shadow: 0 0 0 0.2rem var(--cpq-control-focus);
}

.form-check-input:checked {
  border-color: var(--cpq-control-primary);
  background-color: var(--cpq-control-primary);
}

.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
  min-height: var(--cpq-control-height);
  border-color: var(--cpq-control-border);
  border-radius: var(--cpq-control-radius);
  background-color: var(--cpq-control-bg);
  color: var(--cpq-control-text);
}

.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--open .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--multiple {
  border-color: var(--cpq-control-primary);
  box-shadow: 0 0 0 0.2rem var(--cpq-control-focus);
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
  color: var(--cpq-control-text);
  line-height: calc(var(--cpq-control-height) - 2px);
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
  min-height: var(--cpq-control-height);
}

.flatpickr-input.form-control {
  background-color: var(--cpq-control-bg);
}

.div-select .form-control {
  min-height: var(--cpq-control-height);
  border-color: var(--cpq-control-border);
  border-radius: var(--cpq-control-radius);
  background-color: var(--cpq-control-bg);
  color: var(--cpq-control-text);
  font-size: var(--cpq-control-font-size);
  padding-block: 0.42rem;
}

.div-select .form-control:hover {
  border-color: var(--cpq-control-border);
  background-color: var(--cpq-control-bg-hover);
}

.div-select .form-control.select-open {
  border-color: var(--cpq-control-primary);
  background-color: var(--cpq-control-bg);
  box-shadow: 0 0 0 0.2rem var(--cpq-control-focus);
}