.form-fields-wrapper {
  border-radius: 24px;
  padding: 24px;
  background: var(--bg-content, #FFF);
  margin-bottom: 24px;
}

.form-control-field {
  width: 100%;
  border-radius: 8px;
  border: 1px solid var(--input-border-def, #CBD5E1);
  padding: 9px 14px;
  outline: none;
  cursor: pointer;
  box-sizing: border-box;
}

.form-control-field:focus {
  border: 1.2px solid var(--button-primary-primary, #0350A5);
}

.form-group:hover .form-control-field {
  border-color: #2065F2 !important;
}

.form-group .select2-container.form-control-field {
  border: 0 !important;
  padding: 0;
  background: transparent;
  box-shadow: none;
}

.form-group:hover .select2-container.form-control-field,
.form-group:focus-within .select2-container.form-control-field {
  border: 0 !important;
}

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

.form-group .select2-container .select2-choice {
  position: relative;
  box-sizing: border-box;
  border: 1px solid var(--input-border-def, #CBD5E1);
  border-radius: 8px;
  background: #fff;
  height: 40px;
  line-height: 40px;
  padding: 0 40px 0 12px;
  box-shadow: none;
  max-width: 100%;
  overflow: hidden;
}

.form-group:hover .select2-container .select2-choice {
  border-color: #2065F2 !important;
}

.form-group .select2-container .select2-chosen,
.select2-results {
  color: var(--text-primary, #000);
  font-family: Daikon;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 40px;
}

/* Обмеження ширини вибраного значення */
.form-group .select2-container .select2-chosen {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block;
  max-width: 100%;
}

.select2-results {
  max-height: 300px !important;
}

/* Обмеження ширини та перенесення тексту для випадаючого списку Select2 */
.select2-results .select2-result-label {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  line-height: 1.4 !important;
  padding: 8px 12px !important;
  max-width: 100% !important;
}

.select2-drop {
  max-width: calc(100vw - 48px) !important;
  box-sizing: border-box !important;
}

.select2-drop-active {
  max-width: calc(100vw - 48px) !important;
}

.select2-results li {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.select2-drop .select2-results {
  max-width: 100% !important;
  overflow-x: hidden !important;
}

.form-group .select2-container .select2-arrow {
  width: 36px;
  border-left: none;
  height: 100%;
  background: none !important;
  border: none !important;
  position: absolute;
}

.select2-container .select2-arrow b {
  display: none !important;
}

.select2-container .select2-arrow::after {
  content: url("/ua_portal_design/images/chevron-down.svg") !important;
  position: absolute;
  top: 50%;
  right: 12px !important;
  width: 18px;
  height: 18px;
  transform: translate(-50%, -50%);
  pointer-events: none;
  line-height: 100%;
}

.dataset-form-actions-cust {
  display: flex;
  justify-content: end;
  gap: 12px;
}

.disclaimer-text {
  display: none;
}

select.form-control-field {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("/ua_portal_design/images/chevron-down.svg") !important;
  background-position: right 21px center;
  background-repeat: no-repeat !important;
  background-size: 18px 18px;
  padding-right: 32px;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Стилі для option елементів у селекті */
select.form-control-field option {
  max-width: 100%;
  padding: 8px 14px;
  line-height: 1.4;
}

/* Обмеження ширини для поля title-select */
#field-title-select {
  max-width: 100% !important;
  width: 100% !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  /* Примусове обмеження для випадаючого списку */
  direction: ltr !important;
}

/* Обмеження ширини випадаючого списку - тільки для WebKit браузерів */
#field-title-select::-webkit-scrollbar {
  width: 8px;
}

/* Стилі для опцій у випадаючому списку - обмеження ширини */
#field-title-select option {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  padding: 4px 8px !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* Для Firefox - обмеження довжини тексту */
@-moz-document url-prefix() {
  #field-title-select option {
    overflow: hidden;
    text-overflow: ellipsis;
    direction: ltr;
  }
}

/* Специфічні стилі для Chrome/Edge */
@supports (-webkit-appearance: none) {
  #field-title-select option {
    width: 100% !important;
  }
}

#s2id_autogen1_search {
  background-image: url("/ua_portal_design/images/search.svg") !important;
  background-position: right 12px center !important;
  background-repeat: no-repeat !important;
  background-size: 14px 14px !important;
  padding: 4px 14px !important;
  border-radius: 8px !important;
  border: 1px solid var(--input-border-def, #CBD5E1) !important;
}

select.form-control-field:focus {
  background-image: url("/ua_portal_design/images/chevron-down-active.svg") !important;
}

.select2-container.select2-container-active .select2-arrow::after,
.select2-dropdown-open .select2-arrow::after {
  content: url("/ua_portal_design/images/chevron-down-active.svg") !important;
}

.form-continue-button {
  border-radius: var(--border-radius-button, 999px);
  background: var(--button-primary-primary, #0350A5);
  padding: 8px 18px;
  color: var(--text-ondark, #FFF);
  font-family: Daikon;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  border: none;
}

.form-continue-button:hover {
  background: var(--button-primary-hover, #2065F2);
}

.form-outline-button {
  color: var(--button-primary-outline, #0350A5);
  font-family: Daikon;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  border-radius: var(--border-radius-button, 999px);
  border: 1px solid var(--button-primary-outline, #0350A5);
  padding: 8px 18px;
  background-color: transparent;
}

.form-outline-button:hover {
  color: var(--button-primary-outline-hover, #2065F2);
  border: 1px solid var(--button-primary-outline-hover, #2065F2);
  background: var(--button-primary-bg-hover, rgba(32, 101, 242, 0.10));
}

.form-continue-button.is-disabled,
#saveWithoutResource.is-disabled,
#modalSaveForm.is-disabled {
  opacity: .7;
  cursor: not-allowed;
  pointer-events: none;
}

.form-label {
  color: var(--text-secondary, #475569);
  font-family: Daikon;
  font-size: 16px;
  line-height: 140%;
}

.form-text {
  color: var(--text-secondary, #475569) !important;
  font-family: Daikon;
  font-size: 14px;
  line-height: 140%;
  letter-spacing: 0.07px;
}

.error-state {
  border-radius: 8px;
  border: 1.2px solid var(--input-border-error, #DD3636);
}

.form-text .help-default {
  display: inline;
}

.form-text .help-error-msg {
  display: none;
}

.form-text.is-error .help-default {
  display: none;
}

.form-text.is-error .help-error-msg {
  display: block;
  font-family: Daikon;
}

.form-text.is-error {
  position: relative;
  color: #DD3636 !important;
  border-radius: 6px;
  background: rgba(221, 54, 54, 0.10);
  padding: 8px 8px 8px 28px;
}

.form-text.is-error::before {
  content: "";
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 14px;
  height: 14px;
  background: url("/ua_portal_design/images/warning.svg") no-repeat center/contain;
}


.select2-container .select2-choice.error-state,
.select2-container .select2-selection.error-state {
  border: 1.2px solid var(--input-border-error, #DD3636) !important;
  border-radius: 8px;
}

.form-group:hover .select2-container .select2-choice.error-state,
.form-group:hover .select2-container .select2-selection.error-state {
  border-color: var(--input-border-error, #DD3636) !important;
}

/* styles for the disabled status field */
.field-disabled {
  background-color: #e9ecef !important;
  cursor: not-allowed !important;
  opacity: 0.6;
}

#status-readonly-indicator {
  margin-left: 8px;
  font-size: 0.75rem;
  vertical-align: middle;
}
.modal-cust {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: var(--bg-modal, rgba(0,0,0,.50));
  z-index: 9999;
}
.modal-cust.open {
  display: flex;
}

.modal-container {
  max-width: 640px;
  width: calc(100% - 32px);
}

.modal-container {
  max-width: 640px;
  border-radius: 16px;
  border: 1px solid var(--border-color-defoult, #CBD5E1);
  background: var(--bg-content, #FFF);
  box-shadow: 20px 20px 20px 0 rgba(0, 0, 0, 0.08);
  padding: 32px;
  position: relative;
}

.modal-close {
  position: absolute;
  top: 8px;
  right: 8px;
}

.modal-body {
  display: flex;
  gap: 24px;
  padding: 0;
}

.modal-body-alert__icon {
  padding: 16.5px 16px 15.5px 16px;
  border-radius: 8px;
  background: var(--bg-info, rgba(0, 105, 255, 0.10));
}

.modal-body-content {
  margin-bottom: 40px;
}

.modal-body-title {
  color: var(--text-primary, #000);
  font-family: "Kyiv*Type Sans";
  font-size: 20px;
  font-style: normal;
  font-weight: 500;
  line-height: 110%;
  margin-bottom: 12px;
}

.modal-body-description {
  color: var(--text-secondary, #475569);
  font-family: Daikon;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 140%;
}

.modal-actions {
  display: flex;
  justify-content: center;
  gap: 16px;
}

.modal-btn-back {
  border-radius: 999px;
  border: 1px solid var(--button-primary-outline, #0350A5);
  color: var(--button-primary-outline, #0350A5);
  font-family: Daikon;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  padding: 10.5px 32px;
  background-color: transparent;
}

.modal-btn-back:hover {
  color: var(--button-primary-outline-hover, #2065F2);
  border: 1px solid var(--button-primary-outline-hover, #2065F2);
  background: var(--button-primary-bg-hover, rgba(32, 101, 242, 0.10));
}

.modal-btn-save {
  border-radius: 999px;
  background: var(--button-primary-primary, #0350A5);
  color: var(--text-ondark, #FFF);
  font-family: Daikon;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  border: none;
  padding: 10.5px 32px;
}

.modal-btn-save:hover {
  background: var(--button-primary-hover, #2065F2);
}