/* проверка кастом селектора */
/* body {
  display: flex;
  flex-direction: column;
  margin-top: 20px;
  align-items: center;
  justify-content: center;
} */

@font-face {
  font-family: 'Inter Medium';
  src: url('../fonts/Inter-Medium.ttf') format('truetype');
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: 'Inter SemiBold';
  src: url('../fonts/Inter-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-display: swap;
}

@font-face {
  font-family: 'Inter Bold';
  src: url('../fonts/Inter-Bold.ttf') format('truetype');
  font-weight: 700;
  font-display: swap;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes fadeOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

@keyframes savingAnimation {
  0% {
    opacity: 1;
    transform: scale(1);
  }

  50% {
    opacity: 0.5;
    transform: scale(1.1);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}


:root {
  --white: #fff;
  --black: #000;
  --blue: #3042dc;
  --blue-hover: #2933c0;
  --blue-opacity: #3042dc0d;
  --blue-opacity-hover: #2933c01d;
  --gray: #f2f2f2;
  --gray-2: #dbdbdb;
  --gray-hover: #e3e3e3;
  --input-percents: #0000001A;
  --select-focus-box-shadow: #3042dc33;
  --transition: .3s ease-in-out;
  --ff-500: 'Inter Medium';
  --ff-600: 'Inter SemiBold';
  --ff-700: 'Inter Bold';
}

.logo-container {
  display: flex;
  gap: 12px;
}

.menu-items-container button[id] {
  border-radius: 8px;
  width: 125px;
  height: 48px;
  border: 0;
  outline: none;
  transition: var(--transition);
}

#assembleButton:hover {
  background: var(--gray-hover);
}

#collectButton {
  color: var(--white);
  background: var(--blue);
}

#collectButton:hover {
  background: var(--blue-hover);
}

#openNewTabButton {
  width: 48px;
  height: 48px;
  background: var(--black);
}

#openNewTabButton:hover {
  rotate: 180deg;
}

.cursor-pointer {
  cursor: pointer;
}

.box-shadow {
  box-shadow: 0px 0px 12px 0px #0000000A;
}

.border-radius {
  border-radius: 16px;
}

textarea {
  resize: none;
}

#notes {
  max-width: 625px;
  min-width: 190px;
}

.accordion {
  background: var(--white);
  box-shadow: 0px 0px 12px 0px #0000000A;
  transition: var(--transition);
}

.accordion-header {
  background: var(--white);
  border: 1px solid rgb(219, 229, 230);
  border-radius: 16px;
  transition: var(--transition);
}

.accordion-header:hover {
  border: 1px solid #757575;
}

.accordion-header.border-bottom-only {
  /* border-bottom: 1px solid var(--gray-2); */
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

/* .accordion:has(.detail-box.active) {
  background-image: linear-gradient(44deg, #a8b0f4, #fdbebe);
} */

.detail-box {
  display: grid;
  grid-template-rows: 0fr;
  overflow: hidden;
  transition: grid-template-rows .5s;
}

.detail-box.active {
  grid-template-rows: 1fr;
  border: 1px solid rgb(219, 229, 230);
  border-top: 0;
  border-end-end-radius: 16px;
}

.inner-box {
  min-height: 0;
  overflow-x: auto;
  overflow-y: hidden;
}

.m9-add-component {
  width: 100%;
  margin-top: 24px;
  margin-bottom: 32px;
  padding: .7rem 0;
  cursor: pointer;
  background: var(--blue-opacity);
  color: var(--blue);
  font-family: var(--ff-500);
  font-weight: 500;
  border-radius: 8px;
  border: 0;
  outline: none;
  transition: var(--transition);
}

.m9-add-component:hover {
  background: var(--blue-opacity-hover);
}

.transition-box {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  transition: 0.5s;
  padding-top: 0px;
  margin-inline: 32px;
  transform: translateY(-100%);
  /* transform: translateY(0); */
}

.detail-box.active .transition-box {
  transform: translateY(0);
}

.content {
  /* scale: .6; */
  /* opacity: 0; */
  transition: 0.5s;
}

.detail-box.active .content {
  scale: 1;
  opacity: 1;
  transition-delay: 0.2s;
}

/* .m9-container {
  padding: 20px;
  border-radius: 10px;
  font-size: 24px;
  font-weight: 600;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  font-family: var(--ff-600);
  margin: 0;
  cursor: pointer;
} */

.m9-rounded {
  border-radius: 16px;
}

.transition {
  transition: var(--transition);
}

.rotate-180 {
  rotate: 180deg;
}

/* Фаза 1 */
/* .accordion-childrens {
  display: none;
  margin-top: 20px;
} */

th {
  opacity: .5;
  color: var(--black);
  padding: 0;
  padding-right: 61px;
  padding-bottom: 16px;
  font-family: var(--ff-500);
  font-weight: normal;
}

/* Фаза 1 */
#collapsibleTable tbody tr td~td,
#collapsibleTable thead tr .th~.th {
  padding-left: 32px;
}

tr:last-child td {
  padding-bottom: 0;
}

.accordion-childrens.active {
  display: block;
}

/* Фаза 2 */
/* #outputControlCollapsibleTable {
  display: none;
} */

#outputControlCollapsibleTable.active {
  display: block;
}

#outputControlCollapsibleTable tbody tr td:first-child {
  min-width: 200px;
}

.col div label {
  margin-bottom: 0;
}

@media only screen and (max-width: 375px) {
  label {
    width: 100%;
  }
}

.show {
  border-top: 1px solid var(--gray-2);
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 20px;
  margin-inline: auto;
  padding: 12px;
  width: calc(100% - 64px);
}

h5 {
  margin: 0;
}

.m9-container_wrapperContainer {
  /* Контейнер для форм Взвесил/Посчитал, Дата/Время, Подпись, Заказано */
  justify-content: center;
  /* Центрирование по горизонтали */
  padding: 20px;
  /* Внутренний отступ для содержимого контейнера */
  border-radius: 20px;
  /* Скругление углов контейнера */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 4px 8px rgba(0, 0, 0, 0.2);
  /* Увеличение тени */
  background-color: #c7d2dd;
  /* Добавляем цвет фона */
}

.m9-container-margin {
  margin: 20px 20px 20px 20px;
  /* Внешний отступ сверху и снизу 20px, слева и справа 30px */
}

.m9-container-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 300px;
  height: auto;
  color: #000000;
  /* Изменение цвета текста на белый для лучшей контрастности */
  word-wrap: break-word;
  background: linear-gradient(135deg, #ffffff 0%, #e0e0e0 100%);
  /* Градиентный фон */
  background-clip: border-box;
  border-radius: 20px;
  padding: 20px;
  margin: 20px;
  border: 1px solid rgba(0, 0, 0, 0.05);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 4px 8px rgba(0, 0, 0, 0.2);
  /* Увеличение тени */
  transition: all 0.3s ease;
  /* Добавление плавной анимации */
  font-family: 'Roboto', sans-serif;
  /* Изменение шрифта */
}

.m9-container-card-flex {
  position: relative;
  display: flex;
  flex-direction: row;
  /* Горизонтальное расположение элементов */
  flex-wrap: wrap;
  /* Переход элементов на новую строку при нехватке места */
  min-width: 300px;
  height: auto;
  color: #000000;
  word-wrap: break-word;
  /* background: linear-gradient(135deg, #ffffff 0%, #e0e0e0 100%); */
  background-clip: border-box;
  border-radius: 20px;
  padding: 20px;
  margin: 20px;
  /* border: 1px solid rgba(0,0,0,0.05);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 4px 8px rgba(0, 0, 0, 0.2); */
  transition: all 0.3s ease;
  font-family: 'Roboto', sans-serif;
  align-items: center;
  /* Выравнивание элементов по центру по вертикали */
}

.m9-container-card.collapsed {
  max-height: 100px;
  /* Задайте желаемую максимальную высоту */
  overflow: hidden;
  /* Скрывает содержимое, выходящее за пределы максимальной высоты */
}

/* .m9-table tbody tr:hover {
  background-color: #e9ecef;
  border-radius: 20px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
} */

.m9-input {
  display: block;
  width: 100%;
  padding: 0.75rem 1rem;
  font-family: var(--ff-500);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  height: calc(2.5em + .75rem + 2px);
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: var(--gray);
  color: var(--black);
  background-clip: padding-box;
  border: 2px solid var(--gray);
  border-radius: 8px;
  transition: var(--transition);
  outline: none;
}

.m9-input:focus {
  background: var(--white);
  border: 2px solid var(--blue);
  box-shadow: none;
}

.m9-input:disabled {
  border: 2px solid #e0e0e0;
  background-color: #e0e0e0;
}

/* Стилизация контейнера выпадающего списка */
.m9-select {
  display: block;
  width: 100%;
  padding: 0.75rem 1rem;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--black);
  background: var(--gray);
  border: 2px solid var(--gray);
  border-radius: 8px;
  transition: var(--transition);
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}

/* Стилизация выпадающего списка при фокусе */
.m9-select:focus {
  background: var(--white);
  border: 2px solid var(--blue);
  box-shadow: none;
}

.m9-select:disabled {
  background-color: #e0e0e0;
  color: #000000;
}

.card {
  border: 0;
}

/* .embossed-heavy {
    border: 1px solid rgba(0,0,0,0.05);
    box-shadow: 
        inset 0 2px 3px rgba(255,255,255,0.3), 
        inset 0 -2px 3px rgba(0,0,0,0.3),
        0 1px 1px rgba(255,255,255,0.9);
} */

.m9-input-line {
  display: block;
  border: none;
  color: #333;
  background: transparent;
  border-bottom: 2px solid #ced4da;
  padding: 10px 2px 0 2px;
  transition: border-color .2s ease-in-out, box-shadow .2s ease-in-out;
  box-shadow: 0 1px 0 0 rgba(0, 0, 0, .02);
}

.m9-input-line:focus {
  outline: none;
  border-bottom: 2px solid #51CBEE;
  box-shadow: 0 1px 0 0 rgba(0, 0, 0, .07);
}

.m9-input-mac {
  /* форма в mac-стиле */
  display: block;
  border: none;
  border-radius: 20px;
  padding: 5px 8px;
  color: #333;
  box-shadow:
    inset 0 2px 0 rgba(0, 0, 0, .2),
    0 0 4px rgba(0, 0, 0, 0.1);
}

.m9-input-mac:focus {
  outline: none;
  box-shadow:
    inset 0 2px 0 rgba(0, 0, 0, .2),
    0 0 4px rgba(0, 0, 0, 0.1),
    0 0 5px 1px #51CBEE;
}

.m9-btn-custom {
  background-color: #007bff;
  /* Цвет фона кнопки */
  border-color: #007bff;
  /* Цвет границы кнопки */
  color: #fff;
  /* Цвет текста кнопки */
  font-weight: 600;
  /* Жирный текст */
  padding: 0.5rem 1rem;
  /* Внутренний отступ кнопки */
  font-size: 1rem;
  /* Размер шрифта */
  border-radius: 20px;
  /* Скругление углов кнопки */
  transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.2s ease-in-out;
  /* Анимация для изменения цвета */
}

.m9-btn-custom:hover {
  background-color: #0056b3;
  /* Цвет фона кнопки при наведении */
  border-color: #0056b3;
  /* Цвет границы кнопки при наведении */
  color: #fff;
  /* Цвет текста кнопки при наведении */
}

.m9-btn-custom:focus {
  outline: none;
  /* Удаление стандартного выделения при фокусе */
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
  /* Тень при фокусе */
}

.m9-btn {
  display: block;
  width: 100%;
  padding: 0.75rem 1rem;
  /* Увеличиваем внутренний отступ для лучшего комфорта */
  font-size: 14px;
  /* Увеличиваем размер шрифта */
  font-weight: 600;
  /* Увеличиваем вес шрифта для более выразительного текста */
  line-height: 1.5;
  color: #333;
  /* Темный цвет текста для лучшей читаемости */
  background: linear-gradient(135deg, #f0f0f0 0%, #d1d1d1 100%);
  /* Градиентный фон серо-синего цвета */
  background-clip: padding-box;
  border: 1px solid #ced4da;
  /* Тонкая граница серо-синего цвета */
  border-radius: 20px;
  /* Увеличиваем скругление углов для более округлого вида */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  /* Увеличиваем тень для создания эффекта глубины */
  transition: border-color .2s ease-in-out, box-shadow .2s ease-in-out, background-color .2s ease-in-out;
  /* Добавляем анимацию для фона */
  outline: none;
  /* Удаляем стандартное выделение при фокусе */
  cursor: pointer;
  /* Изменение курсора на указатель при наведении */
}

.m9-btn:focus {
  border-color: #80bdff;
  /* Цвет границы при фокусе */
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
  /* Тень при фокусе */
  background: linear-gradient(135deg, #d1d1d1 0%, #f0f0f0 100%);
  /* Градиентный фон при фокусе */
  transition: border-color .2s ease-in-out, box-shadow .2s ease-in-out, background-color .2s ease-in-out;
  /* Добавляем анимацию для фона */
}

.m9-btn:disabled {
  background: linear-gradient(135deg, #e0e0e0 0%, #d1e7f8 100%);
  /* Градиентный фон для заблокированных форм */
  color: #000000;
  /* Белый цвет текста для лучшей читаемости на темном фоне */
  cursor: not-allowed;
  /* Изменение курсора на "запрещено" при отключении кнопки */
}

.m9-btn:hover {
  background: linear-gradient(135deg, #d1d1d1 0%, #f0f0f0 100%);
  /* Градиентный фон кнопки при наведении */
  border-color: #7c9ec2;
  /* Цвет границы кнопки при наведении */
  color: #333;
  /* Цвет текста кнопки при наведении */
}

.custom-btn {
  width: 130px;
  height: 40px;
  color: #fff;
  border-radius: 5px;
  padding: 10px 25px;
  font-family: 'Lato', sans-serif;
  font-weight: 500;
  background: transparent;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  display: inline-block;
  box-shadow: inset 2px 2px 2px 0px rgba(255, 255, 255, .5),
    7px 7px 20px 0px rgba(0, 0, 0, .1),
    4px 4px 5px 0px rgba(0, 0, 0, .1);
  outline: none;
}

/* 16 */
.btn-16 {
  border: none;
  color: #000;
}

/* 16 */
.btn-16 {
  border: none;
  color: #000;
}

.btn-16:after {
  position: absolute;
  content: "";
  width: 0;
  height: 100%;
  top: 0;
  left: 0;
  direction: rtl;
  z-index: -1;
  box-shadow:
    -7px -7px 20px 0px #fff9,
    -4px -4px 5px 0px #fff9,
    7px 7px 20px 0px #0002,
    4px 4px 5px 0px #0001;
  transition: all 0.3s ease;
}

.btn-16:hover {
  color: #000;
}

.btn-16:hover:after {
  left: auto;
  right: 0;
  width: 100%;
}

.btn-16:active {
  top: 2px;
}

.m9-navigation-btn {
  display: block;
  width: 100%;
  padding: 0.75rem 1rem;
  /* Увеличиваем внутренний отступ для лучшего комфорта */
  font-size: 14px;
  /* Увеличиваем размер шрифта */
  font-weight: 600;
  /* Увеличиваем вес шрифта для более выразительного текста */
  line-height: 1.5;
  color: #333;
  /* Темный цвет текста для лучшей читаемости */
  background: linear-gradient(135deg, #f0f0f0 0%, #d1d1d1 100%);
  /* Градиентный фон серо-синего цвета */
  background-clip: padding-box;
  border: 1px solid #ced4da;
  /* Тонкая граница серо-синего цвета */
  border-radius: 20px;
  /* Увеличиваем скругление углов для более округлого вида */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  /* Увеличиваем тень для создания эффекта глубины */
  transition: border-color .2s ease-in-out, box-shadow .2s ease-in-out, background-color .2s ease-in-out;
  /* Добавляем анимацию для фона */
  outline: none;
  /* Удаляем стандартное выделение при фокусе */
  cursor: pointer;
  /* Изменение курсора на указатель при наведении */
  margin: 0 10px;
  /* Отступы слева и справа между кнопками */
}

.m9-navigation-btn:hover {
  background: linear-gradient(135deg, #d1d1d1 0%, #f0f0f0 100%);
  /* Градиентный фон кнопки при наведении */
  border-color: #7c9ec2;
  /* Цвет границы кнопки при наведении */
  color: #333;
  /* Цвет текста кнопки при наведении */
}

.m9-navigation-btn:focus {
  border-color: #80bdff;
  /* Цвет границы при фокусе */
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
  /* Тень при фокусе */
  background: linear-gradient(135deg, #d1d1d1 0%, #f0f0f0 100%);
  /* Градиентный фон при фокусе */
  transition: border-color .2s ease-in-out, box-shadow .2s ease-in-out, background-color .2s ease-in-out;
  /* Добавляем анимацию для фона */
}

.m9-checkbox-gradient.style-h {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.m9-checkbox-gradient.style-h input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

.m9-checkbox-gradient.style-h input:checked~.checkbox__checkmark {
  background-color: #98e5eb;
}

.m9-checkbox-gradient.style-h input:checked~.checkbox__checkmark:after {
  opacity: 1;
  top: -3px;
}

.m9-checkbox-gradient.style-h input:checked~.checkbox__body {
  background-position: 0 0;
  color: #fff;
}

.m9-checkbox-gradient.style-h:hover input~.checkbox__checkmark {
  background-color: #98e5eb;
}

.m9-checkbox-gradient.style-h:hover input:checked~.checkbox__checkmark {
  background-color: #98e5eb;
}

.m9-checkbox-gradient.style-h:hover .checkbox__body {
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2);
}

.m9-checkbox-gradient.style-h .checkbox__checkmark {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 15px;
  height: 22px;
  width: 22px;
  background-color: #98e5eb;
  transition: background-color 0.25s ease;
  border-radius: 4px;
  box-shadow: inset 2px 2px 4px rgba(0, 0, 0, 0.1), inset -2px -2px 4px rgba(255, 255, 255, 0.4);
}

.m9-checkbox-gradient.style-h .checkbox__checkmark:after {
  content: "";
  position: absolute;
  left: 10px;
  top: -15px;
  width: 10px;
  height: 20px;
  border: solid #fff;
  border-width: 0 4px 4px 0;
  transform: rotate(45deg);
  opacity: 0;
  transition: opacity 0.25s ease, top 0.25s ease;
}

.m9-checkbox-gradient.style-h.checkbox__body {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #333;
  line-height: 1.4;
  font-size: 16px;
  transition: font-weight 0.25s ease;
  font-weight: bold;
  color: #333;
  background: linear-gradient(45deg, #00c3ff 0%, #98e5eb 50%, #98e5eb 50%, #98e5eb 100%);
  background-size: 200% 100%;
  background-position: 100% 0;
  padding: 15px;
  /* padding-left: 52px; */
  border-radius: 10px;
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
  transition: box-shadow 0.25s ease, background 1s ease, color 0.25s ease;
  width: fit-content;
  /* Устанавливает ширину контейнера равной содержимому */
  margin: auto;
  /* Центрирует контейнер относительно его родителя */
}

.saving-indicator {
  position: fixed;
  /* Фиксированное позиционирование */
  top: 20px;
  /* Немного ниже верхнего края экрана */
  left: 50%;
  /* Центрирование по горизонтали */
  transform: translateX(-50%);
  /* Смещение на половину ширины элемента влево, чтобы центрировать */
  padding: 15px 20px;
  /* Увеличиваем внутренний отступ */
  background-color: #4CAF50;
  /* Зеленый фон с прозрачностью */
  color: #fff;
  /* Белый текст */
  border-radius: 20px;
  /* Скругление углов */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  /* Тень для создания эффекта глубины */
  animation: savingAnimation 1s infinite;
  /* Анимация */
  display: none;
  /* По умолчанию скрыт */
  z-index: 1000;
  /* Убедитесь, что индикатор будет виден поверх других элементов */
  font-size: 16px;
  /* Увеличиваем размер шрифта */
  font-weight: bold;
  /* Жирный текст */
}

.logo-container h1 {
  white-space: nowrap;
}

.m9-navigation-menu {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  align-items: center;
  gap: 1.6rem;
  padding: 20px 32px;
  margin-bottom: 0;
  min-height: 112px;
  border-bottom: 1px solid rgb(219, 229, 230);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  background: var(--white);
}

.m9-navigation-menu-icon {
  box-sizing: content-box;
  padding: 12px;
  width: 24px;
  height: 24px;
  border-radius: 8px;
  cursor: pointer;
  transition: var(--transition);
}

.m9-navigation-menu-icon:hover {
  background: var(--gray);
}

.m9-navigation-menu-icon {
  transition: var(--transition);
}

.m9-navigation-menu-icon:hover {
  background: var(--gray);
}

/* Контейнер фаз */
#phasesContainer {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 32px;
}

.menu-items-container {
  display: flex;
  flex-flow: row wrap;
  gap: 12px;
  row-gap: 1rem;
  align-items: center;
  justify-content: end;
}

/* ---------------------Стиль подчеркивания ссылки при наведении------------------------- */

body {
  font-family: var(--ff-500);
  background: var(--gray);
}

.wrapper {
  min-height: 100vh;
  /* растягиваем по высоте браузера */
  width: 100%;
  /* растягиваем по ширине браузера */
  display: grid;
  /* для центрирования дочерних ссылок */
  place-items: center;
  /* центрируем дочерние ссылки */
}

a.underline {
  font-size: 6vw;
  /* размер шрифта относительно ширины браузера */
  text-decoration: none;
  font-weight: bold;
  font-family: 'Lora', serif;
  color: #e76f51;
  position: relative;
  transition: color 0.8s, text-shadow 0.8s;
  /* для плавного изменения цвета и тени(свечения) ссылки */
}

a.underline:after {
  content: '';
  display: block;
  position: absolute;
  /* позиционируем относительно ссылки */
  bottom: 15%;
  background: #2a9d8f;
  height: 20%;
  /* высота относительно высоты ссылки */
  width: 0%;
  /* изначально ширина полосы подчеркивания равна 0% */
  z-index: -1;
  /* ставим полосу подчеркивания позади текста ссылки */
  transition: width 0.8s, opacity 0.8s, box-shadow 0.8s;
  /* для плавного изменения ширины, прозрачности, тени(свечения) */
  border-radius: 100px;
  opacity: 0;
  /* изначально полоса полностью прозрачна */
  box-shadow: 0 0 16px rgba(42, 157, 143, 0);
}

a.underline:hover {
  color: #f4a261;
  text-shadow: 0 0 16px rgba(244, 162, 97, 0.64);
}

/* При наведении на ссылку, псевдоэлемент :after становится непрозрачным и шириной 100% относительно текста ссылки*/
a.underline:hover:after {
  width: 100%;
  opacity: 1;
  box-shadow: 0 0 16px rgba(42, 157, 143, 0.88);
}

/* Underline A */

/* В первом случае :after позиционируем к правому краю текста ссылки */
a.underline_a:after {
  right: 0;
}

/* при наведении позиционируем к левому краю */
a.underline_a:hover:after {
  right: auto;
  left: 0;
}

/* Underline B */

/* В втором случае :after позиционируем к левому краю текста ссылки */
a.underline_b:after {
  left: 0;
}

/* при наведении позиционируем к правому краю */
a.underline_b:hover:after {
  left: auto;
  right: 0;
}

/* Underline C */

/* В третьем случае :after центрируем */
a.underline_c:after {
  left: 0;
  right: 0;
  margin: 0 auto;
}

/*---------------------------Кнопка Добавить фазу----------------------------------------*/

#addPhaseButton {
  outline: none;
  width: calc(100% - 64px);
  margin-inline: auto;
}

/* #addPhaseButton {
  border: none;
  background: none;
  cursor: pointer;
  display: block;
  padding: 5px;
  border-radius: 8px;
  margin: 30px auto;
  transition: var(--transition);
}

#addPhaseButton img {
  width: 40px;
  height: auto;
}

#addPhaseButton:hover {
  background: var(--gray);
} */

/*---------------------------Конец кнопки "Добавить фазу"---------------------------------------*/

/* Start of Custom input */
.dropdown {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.dropdown-select {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: 16px;
  padding-inline: 20px;
  height: 48px;
  min-width: 296px;
  border: 2px solid var(--gray);
  border-radius: 8px;
  background: var(--gray);
  transition: var(--transition);
}

.dropdown-select:hover {
  border: 2px solid var(--blue);
}

.dropdown-select.active {
  background: var(--white);
  border: 2px solid var(--blue);
}

.dropdown-list,
.dropdown-selected {
  opacity: 0;
  visibility: hidden;
  transition: .2s linear;
}

.dropdown-list.active,
.dropdown-selected.active {
  opacity: 1;
  visibility: visible;
}

.dropdown-selected {
  position: absolute;
  z-index: -1;
  transform: translateY(-107%);
  min-width: 304px;
  height: 64px;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
  background: var(--white);
  border-top: 1px solid #0000001A;
  border-left: 1px solid #0000001A;
  border-right: 1px solid #0000001A;
}

.dropdown-select.disabled {
  border: 2px solid #e0e0e0;
  background-color: #e0e0e0;
  cursor: not-allowed;
  /* opacity: 0.5; */
  /* pointer-events: none; */
}

.arrow {
  transition: rotate var(--transition);
}

.arrow.active {
  rotate: 180deg;
  filter: brightness(0) saturate(100%) invert(18%) sepia(94%) saturate(3222%) hue-rotate(233deg) brightness(92%) contrast(88%);
}

.close-input {
  position: absolute;
  right: 44px;
  visibility: hidden;
  opacity: 0;
  cursor: pointer;
  transition: .4s ease-in-out;
  padding: 10px;
}

.close-input:hover {
  rotate: 90deg;
}

.close-input.active {
  visibility: visible;
  opacity: 1;
}

.dropdown-list {
  padding: 18px 24px;
  min-width: 304px;
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
  border-bottom: 1px solid #0000001A;
  border-left: 1px solid #0000001A;
  border-right: 1px solid #0000001A;
  background: var(--white);
}

.dropdown-list__item {
  padding: 6px 9px;
  border-radius: 4px;
  cursor: pointer;
  transition: var(--transition);
}

.dropdown-list__item:hover {
  background: var(--gray);
}

/* End of Custom input */

.form-group {
  display: flex;
  gap: 20px;
  align-items: center;
  justify-content: space-between;
}

/* .col:last-child .form-group {
  margin-bottom: 0;
} */

.form-group>label {
  width: 100%;
}

@media screen and (max-width: 1440px) {
  .form-group {
    flex-wrap: wrap;
  }

  .form-group>label {
    width: auto;
  }

  .m9-input {
    width: auto;
  }

  .col {
    width: auto;
  }
}

.phase {
  padding: 0;
  padding-bottom: 24px;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--gray-2);
  border-radius: 0;
  background: var(--white);
  animation: fadeIn .7s forwards;
  transition: var(--transition);
}

.phase:hover {
  border-bottom: 1px solid #757575;
}

.flex-container {
  /* display: flex; */
  display: none;
  flex-wrap: wrap;
  margin-inline: 20px;
  gap: 10px;
}

td {
  position: relative;
  width: 50%;
  min-width: 296px;
  padding-bottom: 24px;
  color: var(--black);
}

.table-container {
  width: 100%;
  padding-bottom: 32px;
}

table {
  width: 100%;
  border-collapse: collapse;
}

.component td {
  min-width: auto;
  border-bottom: 1px solid rgb(0, 0, 0, .15);
  padding-right: 40px;
  padding-block: 16px;
}

.component td input,
.component td input.m9-input,
.component td select {
  background: none;
}

.component td input:focus,
.component td input.m9-input:focus,
.component td select:focus {
  background: none;
}

tr:last-child.component td {
  padding-bottom: 24px;
}

.component .m9-input {
  width: 100%;
}

td:last-child {
  min-width: auto;
}

.btn-circle-green {
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  background-color: #ffffff;
  color: white;
  border: none;
  cursor: pointer;
}

.form-container {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 10px;
  /* Добавим немного отступа снизу */
}

.form-container label {
  margin-right: 5px;
  /* Добавим немного отступа между надписью и полем ввода */
}

#outputControlCollapsibleTable tbody td {
  box-sizing: content-box;
  min-width: 187px;
  padding-right: 32px;
}

.button-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 187px;
  height: 120px;
  cursor: pointer;
  border: 2px dashed #3042DC40;
  border-radius: 8px;
  background: var(--blue-opacity);
  transition: var(--transition);
}

.button-container:hover {
  background: var(--blue-opacity-hover);
}

.image-button {
  color: var(--blue);
  background: none;
  border: none;
  padding: 0;
  pointer-events: none;
}

.button-image {
  width: 100%;
  max-width: 30px;
  height: 100%;
  max-height: 30px;
  object-fit: cover;
  pointer-events: none;
}

.image-upload-input {
  display: none;
  /* Скрываем input */
}

.wrapper-uploaded-image {
  display: flex;
  flex-flow: wrap row;
  align-items: center;
  justify-content: flex-start;
  gap: 20px;
}

.container-uploaded-image {
  position: relative;
  width: 187px;
  height: 120px;
  overflow: hidden;
  cursor: pointer;
  border: 1px solid rgb(219, 229, 230);
  border-radius: 8px;
  animation: fadeIn .7s forwards;
  background: transparent;
}

.container-uploaded-image:not(:nth-last-child(1)) {
  animation: none;
}

#full-screen-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, .6);
  opacity: 0;
  visibility: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: var(--transition);
}

#full-screen-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border: 1px solid var(--white);
  box-shadow: 0 0 10px rgba(0, 0, 0, .6);
}

.container-uploaded-image::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 300px;
  height: 300px;
  background-color: #00000099;
  border-radius: 50%;
  transform: translate(32px, -38px) scale(0.1);
  opacity: 0;
  z-index: 1;
  transition: transform .7s, opacity .7s;
}

.container-uploaded-image:hover::after {
  opacity: 1;
  transform: scale(1) translate(-100px, -90px);
  pointer-events: none;
}

.container-uploaded-image .delete-button {
  opacity: 0;
  outline: none;
  transform: translateY(-20%);
  transition: var(--transition);
}

.container-uploaded-image:hover .delete-button {
  transform: translateY(0%);
  opacity: 1;
}

.look {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  z-index: 2;
  opacity: 0;
  transition: var(--transition);
}

.container-uploaded-image:hover .look {
  opacity: 1;
}

.uploaded-image {
  width: 187px;
  height: 120px;
}

.delete-button {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 32px;
  height: 32px;
  opacity: 0;
  padding: 0;
  z-index: 2;
  border: 0;
  border-radius: 4px;
  background: var(--white);
  outline: none;
  transition: var(--transition);
}

.delete-button:hover {
  background: var(--gray)
}

#loadingScreen {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}


/*---------------------------Кнопка Добавить компонент------------------------*/

#addButton {
  padding: 0;
  border: none;
  background: none;
  margin-left: 10px;
  cursor: pointer;
}

#addButton img {
  width: 30px;
  height: auto;
  scale: 1;
  transition: 0.4s ease-in-out;
}

#addButton:hover img {
  fill: aquamarine;
  scale: 1.125;
}

#addButton:hover {
  background: url('icons/icons8-add-64.png') no-repeat center;
  background-size: 30px;
  /* Размер гифки */
}

.width-200 {
  width: 200px;
}

.margin-right-200 {
  margin-right: 200px;
}

.versiontk {
  width: 230px;
}

.global_weight {
  width: 100px;
}

.full_weight {
  width: 80px;
}

.recipeButton-style {
  margin-top: 20px;
  margin-left: 20px;
}

/* .assembleButton-style {
    position: absolute;
    right: 15px;
    top: 70px;
} */

.phaseBlockHeaderInput-style {
  width: 50px;
  margin-left: 10px;
}

.deleted {
  border-color: red !important;
}

.modal-body {
  max-height: calc(100vh - 210px);
  overflow-y: auto;
}

.modal-dialog-centered {
  max-width: 100%;
  height: 100vh;
  margin: 0 auto;
}

.modal-content-full-height {
  height: 100vh;
}

.version-select {
  width: 280px;
}

.num-phase-select {
  width: 70px;
  float: 'left';
}

.select-container {
  display: flex;
  align-items: center;
  justify-content: start;
}

.add-batch-button {
  margin-left: 10px;
}

.selectize-dropdown {
  background-color: white !important;
}

/* Стиль для строки при начале перетаскивания */
.dragging {
  opacity: 0.75;
  background-color: #e1f5fe;
  border: 2px dashed #29b6f6;
}

/* Стиль для подсветки целевой строки */
.drag-over {
  background-color: #ffecb3;
  border-top: 2px solid #ff9800;
  border-bottom: 2px solid #ff9800;
}

#customAlert {
  display: none;
  position: fixed;
  z-index: 1;
  right: 20px;
  bottom: 20px;
  width: 30%;
  height: auto;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.8);
  border-radius: 10px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

#customAlert>div {
  background-color: #fefefe;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

#customAlertMessage {
  margin: 0;
  padding: 0;
  font-size: 18px;
  font-weight: bold;
}

.button-container {
  display: flex;
  align-items: center;
}

#adress {
  width: 100px;
  margin-left: 20px;
}

@media screen and (max-width: 385px) {
  .accordion-header img.transition {
    display: none;
  }

  .accordion-header div img {
    margin-left: 20px !important;
  }

  .m9-input {
    max-width: 300px;
    width: 100%;
  }
}

/* div */
.components__show {
  display: flex;
  align-items: center;
  margin-right: 1.5rem;
}

/* div title */
.components__show-procents {
  font-size: 14px;
  color: var(--gray-text);
  margin-right: 1rem;
  opacity: 0;
}

.components__show-procents.active {
  animation: fadeIn .7s forwards;
}

/* div switcher */
.switcher {
  display: inline-block;
  position: relative;
  margin-right: 24px;
  margin-bottom: 0;
  width: 48px;
  height: 24px;
  border-radius: 30px;
  opacity: 0;
  pointer-events: none;
}

.switcher.active {
  animation: fadeIn .7s forwards;
  pointer-events: all;
}

/* switcher checkbox */
.switcher__input {
  width: 0;
  height: 0;
  opacity: 0;
}

/* switcher switcher slider */
.switcher__slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  border-radius: 30px;
  background: var(--gray);
  transition: var(--transition);
}

.switcher__slider::before {
  content: "";
  position: absolute;
  cursor: pointer;
  left: 2px;
  bottom: 2px;
  height: 20px;
  width: 20px;
  border-radius: 30px;
  background: var(--white);
  transition: var(--transition);
}

.switcher__input:checked+.switcher__slider {
  background: var(--blue);
}

.switcher__input:checked+.switcher__slider::before {
  transform: translateX(24px);
}