.CodeMirror {
  z-index: 0;
}

.dynamic-select {
  display: flex;
  box-sizing: border-box;
  flex-direction: column;
  position: relative;
  width: 100%;
  user-select: none;
}

.dynamic-select .btn-group {
  position: relative;
  display: inline-flex;
  vertical-align: middle;
  gap: 10px;
}

.dynamic-select .btn-group .btn {
  margin: 0;
}

.dynamic-select .dynamic-select-header.dynamic-select-header-active {
  border-color: #c1c9d0;
}

.dynamic-select.dynamic-select-active .dynamic-select-options,
.dynamic-select .dynamic-select-header.dynamic-select-header-active + .dynamic-select-options {
  display: flex;
}

.dynamic-select .dynamic-select-options {
  display: none;
  box-sizing: border-box;
  flex-flow: wrap;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 999;
  margin-left: -1px;
  margin-right: -1px;
  margin-top: 5px;
  padding: 5px;
  background-color: #fff;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  /* max-height: 200px; */
  overflow-y: auto;
  overflow-x: hidden;
}
.dynamic-select .dynamic-select-options::-webkit-scrollbar {
  width: 5px;
}
.dynamic-select .dynamic-select-options::-webkit-scrollbar-track {
  background: #f0f1f3;
}
.dynamic-select .dynamic-select-options::-webkit-scrollbar-thumb {
  background: #cdcfd1;
}
.dynamic-select .dynamic-select-options::-webkit-scrollbar-thumb:hover {
  background: #b2b6b9;
}
.dynamic-select .dynamic-select-options .dynamic-select-option {
  padding: 7px 12px;
}
.dynamic-select .dynamic-select-options .dynamic-select-option:hover,
.dynamic-select .dynamic-select-options .dynamic-select-option:active,
.dynamic-select .dynamic-select-options .dynamic-select-option.redClass {
  background-color: #f3f4f7;
}

.dynamic-select .dynamic-select-header,
.dynamic-select .dynamic-select-option {
  font-size: 1rem;
  line-height: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem;
  box-sizing: border-box;
}

.dynamic-select .dynamic-select-option .text-center {
  width: 100%;
}

.dynamic-select .dynamic-select-header img,
.dynamic-select .dynamic-select-option img {
  object-fit: contain;
  max-height: 100%;
  max-width: 100%;
}
.dynamic-select .dynamic-select-header img.dynamic-size,
.dynamic-select .dynamic-select-option img.dynamic-size {
  object-fit: fill;
  max-height: none;
  max-width: 100%;
}

.dynamic-select .dynamic-select-option img.dynamic-size {
  /* width: auto !important; */
}

@media (max-width: 991px) {
  .dynamic-select .dynamic-select-options .dynamic-select-option {
    width: 100% !important;
  }
}

.form-floating .dynamic-select-header {
  padding-top: 1.625rem;
}

.form-floating > .dynamic-select ~ label {
  color: rgba(var(--bs-body-color-rgb), 0.65);
  transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem);
}

.input-group > .dynamic-select {
  position: relative;
  flex: 1 1 auto;
  width: 1%;
  min-width: 0;
}


.input-group:not(.has-validation) > .form-floating:not(:last-child) .dynamic-select-header,
.input-group:not(.has-validation) > .dynamic-select:not(:last-child) .dynamic-select-header {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.input-group:not(.has-validation) > .form-floating:not(:first-child) .dynamic-select-header,
.input-group:not(.has-validation) > .dynamic-select:not(:first-child) .dynamic-select-header {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.was-validated .dynamic-select:has( > input:required:invalid ) ~ .invalid-feedback,
.was-validated .dynamic-select:has( > input:required:valid ) ~ .valid-feedback {
    display: block;
}

.was-validated .dynamic-select input:required + .dynamic-select-header,
.was-validated .dynamic-select input:required + .btn-group .dynamic-select-header {
  padding-right: 4.125rem;
  background-position: right 0.75rem center, center right 2.25rem;
  background-size: 16px 12px, calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}

.was-validated .dynamic-select input:required:invalid + .dynamic-select-header,
.was-validated .dynamic-select input:required:invalid + .btn-group .dynamic-select-header {
  --bs-form-select-bg-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");
  border-color: var(--bs-form-invalid-border-color);
}

.was-validated .dynamic-select input:required:valid + .dynamic-select-header,
.was-validated .dynamic-select input:required:valid + .btn-group .dynamic-select-header {
  --bs-form-select-bg-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23198754' d='M2.3 6.73.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e");
  border-color: var(--bs-form-valid-border-color);
}