.text-border-left {
border-left: 1px solid #ccc;
}
body {background: #fff;}

/* Стилізація модального вікна */
.modal, .modal1, .modal2, .modal3, .modal5, .modal6, .modal7, .modal8, .modal9, .modal10, .modal11, .modal12, .modal13, .modal16, .modal17, .modal18, .modal21, .modal22, .modal23, .modal29, .modal30, .modal31, .modal36, .modal38, .modal39, .modal40, .modal41, .modal42, .modal43, .modal44, .modal45, .modal46, .modal47, .modal48, .modal49, .modal50, .modal51, .modal52, .modal53, .modal54, .modal55 {
  /* display: none; */
  position: fixed;
  z-index: 2000000000 !important;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8); /* Тінь для затемнення */
  overflow: hidden;
}

.modal-content {
  position: relative;
  margin: auto; /* Центруємо модальне вікно */
  padding: 20px;
  width: 80%; /* Встановлюємо ширину модального вікна */
  max-width: 900px; /* Максимальна ширина */
  background-color: white;
  border-radius: 10px;
}

.modal-body {
  display: flex;
  font-size: 80%;
}

.modal-column {
  flex: 1;
  padding: 10px;
}

.image-column img {
  width: 70%;
  height: auto;
  border: 2px solid #fff;
}

.description-column {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

#extraImage {
  margin-top: 20px;
  max-width: 100%;
  border: 1px solid #fff;
}

.close {
  cursor: pointer;
  position: absolute;
  top: 0px; /* Налаштуй це за потребою */
  right: 10px; /* Налаштуй це за потребою */
  font-size: 48px; /* Розмір хрестика */
  padding: 10px; /* Збільшення клікабельної області */
  z-index: 100001; /* Впевнись, що хрестик завжди над іншими елементами */
}


.close:hover {
  color: #000;
}

/* Стиль для курсора "рука" */
.clickable-image {
  cursor: pointer;
}

button {
  margin-top: 20px;
  padding: 10px 20px;
  background-color: #4CAF50;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

button:hover {
  background-color: #45a049;
}
.nazad {
z-index: 0;
}
.pered {
z-index: 1999999 !important;
}